163 lines
8.3 KiB
HTML
163 lines
8.3 KiB
HTML
{% extends "home/base.html" %}
|
|
{% block content %}
|
|
{% load static %}
|
|
{% load humanize %}
|
|
<div id="player" class="player-wrapper">
|
|
<div class="video-main">
|
|
<div class="video-modal"><span class="video-modal-text"></span></div>
|
|
</div>
|
|
</div>
|
|
<div class="notifications" id="notifications"></div>
|
|
<div class="sponsorblock" id="sponsorblock">
|
|
{% if video.sponsorblock.is_enabled %}
|
|
{% if video.sponsorblock.segments|length == 0 %}
|
|
<h4>This video doesn't have any sponsor segments added. To add a segment go to <u><a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">this video on YouTube</a></u> and add a segment using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
|
|
{% elif video.sponsorblock.has_unlocked %}
|
|
<h4>This video has unlocked sponsor segments. Go to <u><a href="https://www.youtube.com/watch?v={{ video.youtube_id }}">this video on YouTube</a></u> and vote on the segments using the <u><a href="https://sponsor.ajay.app/">SponsorBlock</a></u> extension.</h4>
|
|
{% endif %}
|
|
{% endif %}
|
|
</div>
|
|
<div class="boxed-content">
|
|
<div class="title-bar">
|
|
{% if cast %}
|
|
<google-cast-launcher id="castbutton"></google-cast-launcher>
|
|
{% endif %}
|
|
<h1 id="video-title">{{ video.title }}</h1>
|
|
</div>
|
|
<div class="info-box info-box-3">
|
|
<div class="info-box-item">
|
|
<div class="round-img">
|
|
<a href="{% url 'channel_id' video.channel.channel_id %}">
|
|
<img src="/cache/channels/{{ video.channel.channel_id }}_thumb.jpg" alt="channel-thumb">
|
|
</a>
|
|
</div>
|
|
<div>
|
|
<h3><a href="{% url 'channel_id' video.channel.channel_id %}">{{ video.channel.channel_name }}</a></h3>
|
|
{% if video.channel.channel_subs >= 1000000 %}
|
|
<p>Subscribers: {{ video.channel.channel_subs|intword }}</p>
|
|
{% else %}
|
|
<p>Subscribers: {{ video.channel.channel_subs|intcomma }}</p>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
<div class="info-box-item">
|
|
<div>
|
|
<p>Published: {{ video.published }}</p>
|
|
<p>Last refreshed: {{ video.vid_last_refresh }}</p>
|
|
<p class="video-info-watched">Watched:
|
|
{% if video.player.watched %}
|
|
<img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" data-id="{{ video.youtube_id }}" data-status="watched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as unwatched">
|
|
{% else %}
|
|
<img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" data-id="{{ video.youtube_id }}" data-status="unwatched" onclick="updateVideoWatchStatus(this)" class="watch-button" title="Mark as watched">
|
|
{% endif %}
|
|
</p>
|
|
{% if video.active %}
|
|
<p>Youtube: <a href="https://www.youtube.com/watch?v={{ video.youtube_id }}" target="_blank">Active</a></p>
|
|
{% else %}
|
|
<p>Youtube: Deactivated</p>
|
|
{% endif %}
|
|
<a download="" href="/media/{{ video.media_url }}"><button id="download-item">Download File</button></a>
|
|
<button onclick="deleteConfirm()" id="delete-item">Delete Video</button>
|
|
<div class="delete-confirm" id="delete-button">
|
|
<span>Are you sure? </span><button class="danger-button" onclick="deleteVideo(this)" data-id="{{ video.youtube_id }}" data-redirect = "{{ video.channel.channel_id }}">Delete</button> <button onclick="cancelDelete()">Cancel</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="info-box-item">
|
|
<div>
|
|
<p class="thumb-icon"><img src="{% static 'img/icon-eye.svg' %}" alt="views">: {{ video.stats.view_count|intcomma }}</p>
|
|
<p class="thumb-icon like"><img src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-up">: {{ video.stats.like_count|intcomma }}</p>
|
|
{% if video.stats.dislike_count %}
|
|
<p class="thumb-icon"><img class="dislike" src="{% static 'img/icon-thumb.svg' %}" alt="thumbs-down">: {{ video.stats.dislike_count|intcomma }}</p>
|
|
{% endif %}
|
|
{% if video.stats.average_rating %}
|
|
<div class="rating-stars">
|
|
{% for star in video.stats.average_rating %}
|
|
<img src="/static/img/icon-star-{{ star }}.svg" alt="{{ star }}">
|
|
{% endfor %}
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% if video.tags %}
|
|
<div class="description-box">
|
|
<div class="video-tag-box">
|
|
{% for tag in video.tags %}
|
|
<span class="video-tag">{{ tag }}</span>
|
|
{% endfor %}
|
|
</div>
|
|
</div>
|
|
{% endif %}
|
|
{% if video.description %}
|
|
<div class="description-box">
|
|
<p id="text-expand" class="description-text">
|
|
{{ video.description|linebreaksbr|urlizetrunc:50 }}
|
|
</p>
|
|
<button onclick="textExpand()" id="text-expand-button">Show more</button>
|
|
</div>
|
|
{% endif %}
|
|
{% if playlist_nav %}
|
|
{% for playlist_item in playlist_nav %}
|
|
<div class="playlist-wrap">
|
|
<a href="{% url 'playlist_id' playlist_item.playlist_meta.playlist_id %}">
|
|
<h3>Playlist [{{ playlist_item.playlist_meta.current_idx|add:"1" }}]: {{ playlist_item.playlist_meta.playlist_name }}</h3>
|
|
</a>
|
|
<div class="playlist-nav">
|
|
<div class="playlist-nav-item">
|
|
{% if playlist_item.playlist_previous %}
|
|
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
|
|
<img src="/cache/{{ playlist_item.playlist_previous.vid_thumb }}" alt="previous thumbnail">
|
|
</a>
|
|
<div class="playlist-desc">
|
|
<p>Previous:</p>
|
|
<a href="{% url 'video' playlist_item.playlist_previous.youtube_id %}">
|
|
<h3>[{{ playlist_item.playlist_previous.idx|add:"1" }}] {{ playlist_item.playlist_previous.title }}</h3>
|
|
</a>
|
|
</div>
|
|
{% endif %}
|
|
</div>
|
|
<div class="playlist-nav-item">
|
|
{% if playlist_item.playlist_next %}
|
|
<div class="playlist-desc">
|
|
<p>Next:</p>
|
|
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
|
|
<h3>[{{ playlist_item.playlist_next.idx|add:"1" }}] {{ playlist_item.playlist_next.title }}</h3>
|
|
</a>
|
|
</div>
|
|
<a href="{% url 'video' playlist_item.playlist_next.youtube_id %}">
|
|
<img src="/cache/{{ playlist_item.playlist_next.vid_thumb }}" alt="previous thumbnail">
|
|
</a>
|
|
{% endif %}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
{% endfor %}
|
|
{% endif %}
|
|
<div class="description-box">
|
|
<h3>Similar Videos</h3>
|
|
<div class="video-list grid grid-3" id="similar-videos">
|
|
</div>
|
|
<script>getSimilarVideos('{{ video.youtube_id }}')</script>
|
|
</div>
|
|
{% if video.comment_count %}
|
|
<div class="comments-section">
|
|
<h3>Comments: {{video.comment_count}}</h3>
|
|
<div id="comments-list" class="comments-list">
|
|
</div>
|
|
</div>
|
|
<script>getComments('{{ video.youtube_id }}')</script>
|
|
{% endif %}
|
|
</div>
|
|
<script>
|
|
var videoData = getVideoData('{{ video.youtube_id }}');
|
|
sponsorBlock = videoData.data.sponsorblock;
|
|
{% if position %}
|
|
var videoProgress = {{ position }}
|
|
{% else %}
|
|
var videoProgress = getVideoProgress('{{ video.youtube_id }}').position;
|
|
{% endif %}
|
|
window.onload = insertVideoTag(videoData, videoProgress);
|
|
</script>
|
|
{% endblock content %}
|