diff options
Diffstat (limited to 'youtube/templates/watch.html')
| -rw-r--r-- | youtube/templates/watch.html | 492 |
1 files changed, 235 insertions, 257 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 14e953b..0991457 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -1,285 +1,263 @@ {% set page_title = title %} {% extends "base.html" %} {% import "common_elements.html" as common_elements %} -{% import "comments.html" as comments %} +{% import "comments.html" as comments with context %} {% block style %} - details > summary{ - background-color: var(--interface-color); - border-style: outset; - border-width: 2px; - font-weight: bold; - padding-bottom: 2px; - } - details > summary:hover{ - text-decoration: underline; - } - - {% if theater_mode %} - video{ - grid-column: 1 / span 5; - justify-self: center; - max-width: 100%; - width: {{ theater_video_target_width }}px; - max-height: {{ video_height }}px; - margin-bottom: 10px; - background-color: var(--background-color); - } - .related-videos-outer{ - grid-row: 2 /span 3; - width: 400px; - } - .video-info{ - width: 640px; - } - {% else %} - video{ - height: 360px; - width: 640px; - grid-column: 2; - } - .related-videos-outer{ - grid-row: 1 /span 4; - } + <link href="/youtube.com/static/message_box.css" rel="stylesheet"> + <link href="/youtube.com/static/watch.css" rel="stylesheet"> + {% if settings.use_video_player == 2 %} + <!-- plyr --> + <link href="/youtube.com/static/modules/plyr/plyr.css" rel="stylesheet"> + <link href="/youtube.com/static/modules/plyr/custom_plyr.css" rel="stylesheet"> + <!--/ plyr --> {% endif %} +{% endblock style %} - main{ - display:grid; - grid-template-columns: 1fr 640px 40px 400px 1fr; - grid-template-rows: auto auto auto auto; - align-content: start; - } +{% block main %} + {% if playability_error %} + <div class="playability-error"> + <span>{{ 'Error: ' + playability_error }} + {% if invidious_reload_button %} + <a href="{{ video_url }}&use_invidious=0"><br> + Reload without invidious (for usage of new identity button).</a> + {% endif %} + </span> + </div> + {% elif (uni_sources.__len__() == 0 or live) and hls_formats.__len__() != 0 %} + <div class="live-url-choices"> + <span>Copy a url into your video player:</span> + <ol> + {% for fmt in hls_formats %} + <li class="url-choice"><div class="url-choice-label">{{ fmt['video_quality'] }}: </div><input class="url-choice-copy" value="{{ fmt['url'] }}" readonly onclick="this.select();"></li> + {% endfor %} + </ol> + </div> + {% else %} + <figure class="sc-video"> + <video id="js-video-player" playsinline controls {{ 'autoplay' if settings.autoplay_videos }}> + {% if uni_sources %} + <source src="{{ uni_sources[uni_idx]['url'] }}" type="{{ uni_sources[uni_idx]['type'] }}" data-res="{{ uni_sources[uni_idx]['quality'] }}"> + {% endif %} - .video-info{ - grid-column: 2; - grid-row: 2; - display: grid; - grid-template-rows: 0fr 0fr 0fr 20px 0fr 0fr; - grid-template-columns: 1fr 1fr; - align-content: start; - } - .video-info > .title{ - grid-column: 1 / span 2; - min-width: 0; - } - .video-info > .is-unlisted{ - background-color: var(--interface-color); - justify-self:start; - padding-left:2px; - padding-right:2px; - } - .video-info > address{ - grid-column: 1; - grid-row: 3; - justify-self: start; - } - .video-info > .views{ - grid-column: 2; - grid-row: 3; - justify-self:end; - } - .video-info > time{ - grid-column: 1; - grid-row: 4; - justify-self:start; - } - .video-info > .likes-dislikes{ - grid-column: 2; - grid-row: 4; - justify-self:end; - } - .video-info > .download-dropdown{ - grid-column:1 / span 2; - grid-row: 6; - } - .video-info > .checkbox{ - justify-self:end; - align-self: start; + {% for source in subtitle_sources %} + {% if source['on'] %} + <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default> + {% else %} + <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}"> + {% endif %} + {% endfor %} + </video> + </figure> + {% endif %} - grid-row: 5; - grid-column: 2; - } - .video-info > .description{ - background-color:var(--interface-color); - margin-top:8px; - white-space: pre-wrap; - min-width: 0; - word-wrap: break-word; - grid-column: 1 / span 2; - grid-row: 7; - } + <div class="sc-info"> + <div class="video-info"> + <h1 class="v-title">{{ title }}</h1> - .music-list{ - grid-row:8; - grid-column: 1 / span 2; - background-color: var(--interface-color); - } - .music-list table,th,td{ - border: 1px solid; - } - .music-list th,td{ - padding-left:4px; - padding-right:5px; - } - .music-list caption{ - text-align:left; - font-weight:bold; - margin-bottom:5px; - } - .comments-area-outer{ - grid-column: 2; - grid-row: 3; - margin-top:10px; - } - .comments-area-inner{ - padding-top: 10px; - } - .comment{ - width:640px; - } - .related-videos-outer{ - grid-column: 4; - max-width: 640px; - } - .related-videos-inner{ - padding-top: 10px; - display: grid; - grid-auto-rows: 94px; - grid-row-gap: 10px; - } + <ul class="labels"> + {%- if unlisted -%} + <li class="is-unlisted">Unlisted</li> + {%- endif -%} + {%- if age_restricted -%} + <li class="age-restricted">Age-restricted</li> + {%- endif -%} + {%- if limited_state -%} + <li>Limited state</li> + {%- endif -%} + {%- if live -%} + <li>Live</li> + {%- endif -%} + </ul> - /* Put related vids below videos when window is too small */ - /* 1100px instead of 1080 because W3C is full of idiots who include scrollbar width */ - @media (max-width:1100px){ - main{ - grid-template-columns: 1fr 640px 40px 1fr; - } - .related-videos-outer{ - margin-top: 10px; - grid-column: 2; - grid-row: 3; - width: initial; - } - .comments-area-outer{ - grid-row: 4; - } - } + <address class="v-uploaded">Uploaded by <a href="{{ uploader_channel_url }}">{{ uploader }}</a></address> + <span class="v-views">{{ view_count }} views</span> + <time class="v-published" datetime="{{ time_published_utc }}">Published on {{ time_published }}</time> + <span class="v-likes-dislikes">{{ like_count }} likes</span> - .download-dropdown-content{ - background-color: var(--interface-color); - padding: 10px; - list-style: none; - margin: 0px; - } - li.download-format{ - margin-bottom: 7px; - } - .format-attributes{ - list-style: none; - padding: 0px; - margin: 0px; - display: flex; - flex-direction: row; - } - .format-attributes li{ - white-space: nowrap; - max-height: 1.2em; - } - .format-ext{ - width: 60px; - } - .format-res{ - width:90px; - } -{% endblock style %} + <div class="external-player-controls"> + <input class="speed" id="speed-control" type="text" title="Video speed"> + {% if settings.use_video_player != 2 %} + <select id="quality-select" autocomplete="off"> + {% for src in uni_sources %} + <option value='{"type": "uni", "index": {{ loop.index0 }}}' {{ 'selected' if loop.index0 == uni_idx and not using_pair_sources else '' }} >{{ src['quality_string'] }}</option> + {% endfor %} + {% for src_pair in pair_sources %} + <option value='{"type": "pair", "index": {{ loop.index0}}}' {{ 'selected' if loop.index0 == pair_idx and using_pair_sources else '' }} >{{ src_pair['quality_string'] }}</option> + {% endfor %} + </select> + {% endif %} + </div> + <input class="v-checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox"> -{% block main %} - <video controls autofocus> - {% for video_source in video_sources %} - <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}"> - {% endfor %} + <span class="v-direct-link"><a href="https://youtu.be/{{ video_id }}" rel="noopener noreferrer" target="_blank">Direct Link</a></span> - {% for source in subtitle_sources %} - {% if source['on'] %} - <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}" default> + {% if settings.use_video_download != 0 %} + <details class="v-download"> + <summary class="download-dropdown-label">Download</summary> + <ul class="download-dropdown-content"> + {% for format in download_formats %} + <li class="download-format"> + <a class="download-link" href="{{ format['url'] }}" download="{{ title }}.{{ format['ext'] }}"> + {{ format['ext'] }} {{ format['video_quality'] }} {{ format['audio_quality'] }} {{ format['file_size'] }} {{ format['codecs'] }} + </a> + </li> + {% endfor %} + {% for download in other_downloads %} + <li class="download-format"> + <a href="{{ download['url'] }}" download> + {{ download['ext'] }} {{ download['label'] }} + </a> + </li> + {% endfor %} + </ul> + </details> {% else %} - <track label="{{ source['label'] }}" src="{{ source['url'] }}" kind="subtitles" srclang="{{ source['srclang'] }}"> + <span class="v-download"></span> {% endif %} - {% endfor %} + <span class="v-description">{{ common_elements.text_runs(description)|escape|urlize|timestamps|safe }}</span> - </video> + <div class="v-music-list"> + {% if music_list.__len__() != 0 %} + <hr> + <table> + <caption>Music</caption> + <tr> + {% for attribute in music_attributes %} + <th>{{ attribute }}</th> + {% endfor %} + </tr> + {% for track in music_list %} + <tr> + {% for attribute in music_attributes %} + {% if attribute.lower() == 'title' and track['url'] is not none %} + <td><a href="{{ track['url'] }}">{{ track.get(attribute.lower(), '') }}</a></td> + {% else %} + <td>{{ track.get(attribute.lower(), '') }}</td> + {% endif %} + {% endfor %} + </tr> + {% endfor %} + </table> + {% endif %} + </div> + <details class="v-more-info"> + <summary>More info</summary> + <div class="more-info-content"> + <p>Tor exit node: {{ ip_address }}</p> + {% if invidious_used %} + <p>Used Invidious as fallback.</p> + {% endif %} + <p class="allowed-countries">Allowed countries: {{ allowed_countries|join(', ') }}</p> + {% if settings.use_sponsorblock_js %} + <ul class="more-actions"> + <li><label><input type=checkbox id=skip_sponsors checked>skip sponsors</label> <span id=skip_n></span> + </ul> + {% endif %} + </div> + </details> + </div> - <div class="video-info"> - <h2 class="title">{{ title }}</h2> - {% if unlisted %} - <span class="is-unlisted">Unlisted</span> - {% endif %} - <address>Uploaded by <a href="{{ uploader_channel_url }}">{{ uploader }}</a></address> - <span class="views">{{ views }} views</span> + <div class="side-videos"> + <!-- playlist --> + {% if playlist %} + <div class="site-playlist"> + <div class="playlist-header"> + <a href="{{ playlist['url'] }}" title="{{ playlist['title'] }}"><h3>{{ playlist['title'] }}</h3></a> + <ul class="playlist-metadata"> + <li><label for="playlist-autoplay-toggle">Autoplay: </label><input id="playlist-autoplay-toggle" type="checkbox" class="autoplay-toggle"></li> + {% if playlist['current_index'] is none %} + <li>[Error!]/{{ playlist['video_count'] }}</li> + {% else %} + <li>{{ playlist['current_index']+1 }}/{{ playlist['video_count'] }}</li> + {% endif %} + <li><a href="{{ playlist['author_url'] }}" title="{{ playlist['author'] }}">{{ playlist['author'] }}</a></li> + </ul> + </div> + <nav class="playlist-videos"> + {% for info in playlist['items'] %} + {# non-lazy load for 5 videos surrounding current video #} + {# for non-js browsers or old such that IntersectionObserver doesn't work #} + {# -10 is sentinel to not load anything if there's no current_index for some reason #} + {% if (playlist.get('current_index', -10) - loop.index0)|abs is lt(5) %} + {{ common_elements.item(info, include_badges=false, lazy_load=false) }} + {% else %} + {{ common_elements.item(info, include_badges=false, lazy_load=true) }} + {% endif %} + {% endfor %} + </nav> + </div> + {% elif settings.related_videos_mode != 0 %} + <div class="related-autoplay"><label for="related-autoplay-toggle">Autoplay: </label><input id="related-autoplay-toggle" type="checkbox" class="autoplay-toggle"></div> + {% endif %} - <time datetime="$upload_date">Published on {{ upload_date }}</time> - <span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span> - <details class="download-dropdown"> - <summary class="download-dropdown-label">Download</summary> - <ul class="download-dropdown-content"> - {% for format in download_formats %} - <li class="download-format"> - <a class="download-link" href="{{ format['url'] }}"> - <ol class="format-attributes"> - <li class="format-ext">{{ format['ext'] }}</li> - <li class="format-res">{{ format['resolution'] }}</li> - <li class="format-note">{{ format['note'] }}</li> - </ol> - </a> - </li> - {% endfor %} - </ul> - </details> - <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox"> + {% if subtitle_sources %} + <details id="transcript-details"> + <summary>Transcript</summary> + <div id="transcript-div"> + <select id="select-tt"> + {% for source in subtitle_sources %} + <option>{{ source['label'] }}</option> + {% endfor %} + </select> + <label for="transcript-use-table">Table view</label> + <input id="transcript-use-table" type="checkbox"> + <table id="transcript-table"></table> + </div> + </details> + {% endif %} - <span class="description">{{ description }}</span> - <div class="music-list"> - {% if music_list.__len__() != 0 %} - <hr> - <table> - <caption>Music</caption> - <tr> - {% for attribute in music_attributes %} - <th>{{ attribute }}</th> + {% if settings.related_videos_mode != 0 %} + <details class="related-videos-outer" {{'open' if settings.related_videos_mode == 1 else ''}}> + <summary>Related Videos</summary> + <nav class="related-videos-inner"> + {% for info in related %} + {{ common_elements.item(info, include_badges=false) }} {% endfor %} - </tr> - {% for track in music_list %} - <tr> - {% for attribute in music_attributes %} - <td>{{ track.get(attribute.lower(), '') }}</td> - {% endfor %} - </tr> - {% endfor %} - </table> + </nav> + </details> {% endif %} + </div> - </div> - {% if related_videos_mode != 0 %} - <details class="related-videos-outer" {{'open' if related_videos_mode == 1 else ''}}> - <summary>Related Videos</summary> - <nav class="related-videos-inner"> - {% for info in related %} - {{ common_elements.item(info) }} - {% endfor %} - </nav> - </details> - {% endif %} + <!-- comments --> + {% if settings.comments_mode != 0 %} + {% if comments_disabled %} + <div class="comments-area-outer comments-disabled">Comments disabled</div> + {% else %} + <details class="comments-area-outer" {{'open' if settings.comments_mode == 1 else ''}}> + <summary>{{ comment_count|commatize }} comment{{'s' if comment_count != '1' else ''}}</summary> + <div class="comments-area-inner comments-area"> + {% if comments_info %} + {{ comments.video_comments(comments_info) }} + {% endif %} + </div> + </details> + {% endif %} + {% endif %} - {% if comments_mode != 0 %} - <details class="comments-area-outer" {{'open' if comments_mode == 1 else ''}}> - <summary>Comments</summary> - <section class="comments-area-inner comments-area"> - {% if comments_info %} - {{ comments.video_comments(comments_info) }} - {% endif %} - </section> - </details> + </div> + + <script src="/youtube.com/static/js/av-merge.js"></script> + <script src="/youtube.com/static/js/watch.js"></script> + <script> + // @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-v3-or-Later + let storyboard_url = {{ storyboard_url | tojson }}; + // @license-end + </script> + <script src="/youtube.com/static/js/common.js"></script> + <script src="/youtube.com/static/js/transcript-table.js"></script> + {% if settings.use_video_player == 2 %} + <!-- plyr --> + <script src="/youtube.com/static/modules/plyr/plyr.min.js" + integrity="sha512-l6ZzdXpfMHRfifqaR79wbYCEWjLDMI9DnROvb+oLkKq6d7MGroGpMbI7HFpicvmAH/2aQO+vJhewq8rhysrImw==" + crossorigin="anonymous"></script> + <script src="/youtube.com/static/js/plyr-start.js"></script> + <!-- /plyr --> + {% elif settings.use_video_player == 1 %} + <script src="/youtube.com/static/js/hotkeys.js"></script> {% endif %} + {% if settings.use_comments_js %} <script src="/youtube.com/static/js/comments.js"></script> {% endif %} + {% if settings.use_sponsorblock_js %} <script src="/youtube.com/static/js/sponsorblock.js"></script> {% endif %} {% endblock main %} |