lib.itmens/catalog/templates/podcast.html

{% extends "item_base.html" %}
{% load static %}
{% load i18n %}
{% load l10n %}
{% load humanize %}
{% load admin_url %}
{% load mastodon %}
{% load oauth_token %}
{% load truncate %}
{% load strip_scheme %}
{% load thumb %}

{% block opengraph %}
<script src=" https://cdn.jsdelivr.net/npm/shikwasa@2.2.0/dist/shikwasa.min.js "></script>
<link href=" https://cdn.jsdelivr.net/npm/shikwasa@2.2.0/dist/style.min.css " rel="stylesheet"></link>
{% endblock %}

<!-- class specific details -->
{% block details %}
<style type="text/css">
	.entity-detail .entity-detail__img {
		height: unset !important;
	}
</style>
<div class="entity-detail__fields">
	<div class="entity-detail__rating">
		{% if item.rating and item.rating_count >= 5 %}
		<span class="entity-detail__rating-star rating-star" data-rating-score="{{ item.rating | floatformat:0 }}"></span>
		<span class="entity-detail__rating-score"> {{ item.rating | floatformat:1 }} </span>
		<small>({{ item.rating_count }}人评分)</small>
		{% else %}
		<span> {% trans '评分：评分人数不足' %}</span>
		{% endif %}
	</div>

	<div>
		{% if item.genre %}{% trans '类型：' %}
		{% for genre in item.genre %}
		<span>{{ genre }}</span>{% if not forloop.last %} / {% endif %}
		{% endfor %}
		{% endif %}
	</div>

	<div>{% if item.official_site %}
		{% trans '网站：' %}{{ item.official_site|urlizetrunc:42 }}
		{% endif %}
	</div>

</div>
<div class="entity-detail__fields">

	<div>{% if item.hosts %}{% trans '主播：' %}
		{% for host in item.hosts %}
		<span {% if forloop.counter > 5 %}style="display: none;" {% endif %}>
			<span class="other_title">{{ host }}</span>
			{% if not forloop.last %} / {% endif %}
		</span>
		{% endfor %}
		{% if item.hosts|length > 5 %}
		<a href="javascript:void(0);" id="otherTitleMore">{% trans '更多' %}</a>
		<script>
			$("#otherTitleMore").on('click', function (e) {
				$("span.other_title:not(:visible)").each(function (e) {
					$(this).parent().removeAttr('style');
				});
				$(this).remove();
			})
		</script>
		{% endif %}
		{% endif %}
	</div>


	{% if item.last_editor and item.last_editor.preference.show_last_edit  %}
	<div>{% trans '最近编辑者：' %}<a href="{% url 'journal:user_profile' item.last_editor.mastodon_username %}">{{ item.last_editor | default:"" }}</a></div>
	{% endif %}

	<div>
		{% if user.is_authenticated %}
		<a href="{% url 'catalog:edit' item.url_path item.uuid %}">{% trans '编辑' %}{{ item.demonstrative }}</a>
		{% endif %}
	</div>
</div>
{% endblock %}


<!-- class specific sidebar -->
{% block sidebar %}
<div class="aside-section-wrapper">
  <div class="action-panel" id="episodes">
    <div class="action-panel__label">{% trans '最近更新' %}</div>
    <div >
      {% for ep in item.recent_episodes %}
      <p>
        <a data-media="{{ ep.media_url }}" data-cover="{{ ep.cover_url|default:item.cover }}" class="episode" href="{{ep.link}}">{{ ep.title }}</a>
      </p>
      {% endfor %}
    </div>
    <div class="action-panel__button-group action-panel__button-group--center">
      <button href="#" class="podlove-subscribe-button-primary action-panel__button">{% trans '订阅' %}</button>
    </div>
  </div>
</div>

<script>
  window.podcastData = {
    "title": "{{ item.title | escapejs }}",
    "subtitle": "",
    "description": "{{ item.brief | escapejs }}",
    "cover": "{{ item.cover.url | escapejs }}",
    "feeds": [
      {
        "type": "audio",
        "format": "mp3",
        "url": "{{ item.feed_url | escapejs }}",
        "variant": "high"
      }
    ]
  }
</script>
<script class="podlove-subscribe-button" src="https://cdn.podlove.org/subscribe-button/javascripts/app.js" data-json-data="podcastData" data-buttonid="primary" data-language="en" data-hide="true" data-color="#1190C0">
</script>

<script type="text/javascript">
	$(()=>{
		$('.episode').on('click', e=>{
			e.preventDefault();
			ele = e.target;
			album = "{{ item.title|escapejs }}"
			artists = "{{ item.hosts|join:' / '|escapejs }}"
			title = $(ele).text();
			cover_url = $(ele).data('cover');
			media_url = $(ele).data('media');
			if (!media_url) return;
			if (!window.player) {
				window.player = new Shikwasa.Player({
				  container: () => document.querySelector('.player'),
				  preload: 'metadata',
				  autoplay: true,
				  themeColor: '#1190C0',
				  fixed: {
				  	type: 'fixed',
				  	position: 'bottom'
				  },
				  audio: {
				    title: title,
				    cover: cover_url,
				    src: media_url,
				    album: album,
				    artist: artists
				  }
				});
				$('.shk-title').on('click', e=>{
					window.location = "#episodes";
				});
			} else {
				window.player.update({
			    title: title,
			    cover: cover_url,
			    src: media_url,
			    album: album,
			    artist: artists
			  })
			}
			window.player.play()
		});
		$('.footer').attr('style', 'margin-bottom: 120px !important');
	});
</script>
{% endblock %}