diff options
Diffstat (limited to 'youtube/templates/watch.html')
| -rw-r--r-- | youtube/templates/watch.html | 439 |
1 files changed, 247 insertions, 192 deletions
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html index 82c1a97..14e953b 100644 --- a/youtube/templates/watch.html +++ b/youtube/templates/watch.html @@ -3,96 +3,116 @@ {% import "common_elements.html" as common_elements %} {% import "comments.html" as comments %} {% block style %} - main{ - display:grid; - grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr); - background-color:#cccccc; - } + 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; + } + {% endif %} + + main{ + display:grid; + grid-template-columns: 1fr 640px 40px 400px 1fr; + grid-template-rows: auto auto auto auto; + align-content: start; + } - #left{ - background-color:#bcbcbc; + .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; + 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; + } + + .music-list{ + grid-row:8; + grid-column: 1 / span 2; + background-color: var(--interface-color); } - .full-item{ - display: grid; - grid-column: 2; - grid-template-rows: 0fr 0fr 0fr 0fr 20px 0fr 0fr; - grid-template-columns: 1fr 1fr; - align-content: start; - background-color:#bcbcbc; - } - .full-item > video{ - grid-column: 1 / span 2; - grid-row: 1; - } - .full-item > .title{ - grid-column: 1 / span 2; - grid-row:2; - min-width: 0; - } - .full-item > .is-unlisted{ - background-color: #d0d0d0; - justify-self:start; - padding-left:2px; - padding-right:2px; - } - .full-item > address{ - grid-column: 1; - grid-row: 4; - justify-self: start; - } - .full-item > .views{ - grid-column: 2; - grid-row: 4; - justify-self:end; - } - .full-item > time{ - grid-column: 1; - grid-row: 5; - justify-self:start; - } - .full-item > .likes-dislikes{ - grid-column: 2; - grid-row: 5; - justify-self:end; - } - .full-item > .download-dropdown{ - grid-column:1; - grid-row: 6; - } - .full-item > .checkbox{ - justify-self:end; - - grid-row: 6; - grid-column: 2; - } - .full-item > .description{ - background-color:#d0d0d0; - margin-top:8px; - white-space: pre-wrap; - min-width: 0; - word-wrap: break-word; - grid-column: 1 / span 2; - grid-row: 7; - } - .full-item .music-list{ - grid-row:8; - grid-column: 1 / span 2; - } - - .full-item .comments-area{ - grid-column: 1 / span 2; - grid-row: 9; - margin-top:10px; - } - .comment{ - width:640px; - } - - .music-list{ - background-color: #d0d0d0; - } .music-list table,th,td{ border: 1px solid; } @@ -105,126 +125,161 @@ 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; + } - #related{ - grid-column: 4; - display: grid; - grid-auto-rows: 90px; - grid-row-gap: 10px; - } - #related .medium-item{ - grid-template-columns: 160px 1fr 0fr; - } + /* 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; + } + } - .download-dropdown{ - z-index:1; - justify-self:start; - min-width:0px; - height:0px; + .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; } - - .download-dropdown-label{ - background-color: #e9e9e9; - border-style: outset; - border-width: 2px; - font-weight: bold; + .format-attributes li{ + white-space: nowrap; + max-height: 1.2em; } - - .download-dropdown-content{ - display:none; - background-color: #e9e9e9; + .format-ext{ + width: 60px; } - .download-dropdown:hover .download-dropdown-content { - display: grid; - grid-auto-rows:30px; - padding-bottom: 50px; + .format-res{ + width:90px; } - .download-dropdown-content a{ - white-space: nowrap; - display:grid; - grid-template-columns: 60px 90px auto; - max-height: 1.2em; - } {% endblock style %} {% block main %} - <div id="left"> - </div> - <article class="full-item"> - - <video width="640" height="360" controls autofocus> -{% for video_source in video_sources %} - <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}"> -{% endfor %} - -{% 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> - - <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> - - - <time datetime="$upload_date">Published on {{ upload_date }}</time> - <span class="likes-dislikes">{{ likes }} likes {{ dislikes }} dislikes</span> - <div class="download-dropdown"> - <button class="download-dropdown-label">Download</button> - <div class="download-dropdown-content"> -{% for format in download_formats %} - <a href="{{ format['url'] }}"> - <span>{{ format['ext'] }}</span> - <span>{{ format['resolution'] }}</span> - <span>{{ format['note'] }}</span> - </a> -{% endfor %} - </div> - </div> - <input class="checkbox" name="video_info_list" value="{{ video_info }}" form="playlist-edit" type="checkbox"> - - <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> - {% endfor %} - </tr> - {% for track in music_list %} - <tr> - {% for attribute in music_attributes %} - <td>{{ track.get(attribute.lower(), '') }}</td> - {% endfor %} - </tr> - {% endfor %} - </table> - {% endif %} - </div> + <video controls autofocus> + {% for video_source in video_sources %} + <source src="{{ video_source['src'] }}" type="{{ video_source['type'] }}"> + {% endfor %} - {% if comments_info %} - {{ comments.video_comments(comments_info) }} - {% endif %} - </article> + {% 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> + + <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> + <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"> - <nav id="related"> - {% for info in related %} - {{ common_elements.item(info) }} + <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> + {% endfor %} + </tr> + {% for track in music_list %} + <tr> + {% for attribute in music_attributes %} + <td>{{ track.get(attribute.lower(), '') }}</td> + {% endfor %} + </tr> {% endfor %} - </nav> + </table> + {% 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 %} + {% 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> + {% endif %} {% endblock main %} |