aboutsummaryrefslogtreecommitdiffstats
path: root/youtube/templates
diff options
context:
space:
mode:
authorJames Taylor <user234683@users.noreply.github.com>2019-06-16 16:16:03 -0700
committerJames Taylor <user234683@users.noreply.github.com>2019-06-16 16:16:03 -0700
commit2db58930a6f8c955c4d437657bd07e2939a705f2 (patch)
treeb1d388bd4adc1d3134d255cd0c4d8746d7b2468b /youtube/templates
parent9f93b9429c77e631972186049fbc7518e2cf5d4b (diff)
downloadyt-local-2db58930a6f8c955c4d437657bd07e2939a705f2.tar.lz
yt-local-2db58930a6f8c955c4d437657bd07e2939a705f2.tar.xz
yt-local-2db58930a6f8c955c4d437657bd07e2939a705f2.zip
Convert watch page to flask framework
Diffstat (limited to 'youtube/templates')
-rw-r--r--youtube/templates/error.html17
-rw-r--r--youtube/templates/watch.html222
2 files changed, 239 insertions, 0 deletions
diff --git a/youtube/templates/error.html b/youtube/templates/error.html
new file mode 100644
index 0000000..f253807
--- /dev/null
+++ b/youtube/templates/error.html
@@ -0,0 +1,17 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>Error</title>
+ <link href="/youtube.com/shared.css" type="text/css" rel="stylesheet">
+ <link href="/youtube.com/comments.css" type="text/css" rel="stylesheet">
+ <link href="/youtube.com/favicon.ico" type="image/x-icon" rel="icon">
+ <link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
+ </head>
+ <body>
+{{ header|safe }}
+ <main>
+{{ error_message }}
+ </main>
+ </body>
+</html>
diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
new file mode 100644
index 0000000..7e83306
--- /dev/null
+++ b/youtube/templates/watch.html
@@ -0,0 +1,222 @@
+<!DOCTYPE html>
+<html>
+ <head>
+ <meta charset="utf-8">
+ <title>{{ title }}</title>
+ <link href="/youtube.com/static/shared.css" type="text/css" rel="stylesheet">
+ <link href="/youtube.com/static/comments.css" type="text/css" rel="stylesheet">
+ <link href="/youtube.com/static/favicon.ico" type="image/x-icon" rel="icon">
+ <link title="Youtube local" href="/youtube.com/opensearch.xml" rel="search" type="application/opensearchdescription+xml">
+ <style type="text/css">
+ main{
+ display:grid;
+ grid-template-columns: minmax(0px, 3fr) 640px 40px 500px minmax(0px,2fr);
+ background-color:#cccccc;
+ }
+
+ #left{
+ background-color:#bcbcbc;
+ grid-column: 1;
+
+ }
+ .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;
+ }
+ .music-list th,td{
+ padding-left:4px;
+ padding-right:5px;
+ }
+ .music-list caption{
+ text-align:left;
+ font-weight:bold;
+ margin-bottom:5px;
+ }
+
+ #related{
+ grid-column: 4;
+ display: grid;
+ grid-auto-rows: 90px;
+ grid-row-gap: 10px;
+ }
+ #related .medium-item{
+ grid-template-columns: 160px 1fr 0fr;
+ }
+
+ .download-dropdown{
+ z-index:1;
+ justify-self:start;
+ min-width:0px;
+ height:0px;
+ }
+
+ .download-dropdown-label{
+ background-color: #e9e9e9;
+ border-style: outset;
+ border-width: 2px;
+ font-weight: bold;
+ }
+
+ .download-dropdown-content{
+ display:none;
+ background-color: #e9e9e9;
+ }
+ .download-dropdown:hover .download-dropdown-content {
+ display: grid;
+ grid-auto-rows:30px;
+ padding-bottom: 50px;
+ }
+ .download-dropdown-content a{
+ white-space: nowrap;
+ display:grid;
+ grid-template-columns: 60px 90px auto;
+ max-height: 1.2em;
+ }
+ </style>
+ </head>
+ <body>
+{{ header|safe }}
+ <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">
+{{ music_list|safe }}
+ </div>
+{{ comments|safe }}
+ </article>
+
+
+
+
+ <nav id="related">
+{{ related|safe }}
+ </nav>
+
+ </main>
+
+
+
+
+
+ </body>
+</html>
generated by cgit v1.2.3 (git 2.25.1) at 2024-11-15 11:31:46 +0000