Merge flask framework and other stuff from master

1 files changed, 230 insertions, 0 deletions

diff --git a/youtube/templates/watch.html b/youtube/templates/watch.html
new file mode 100644
index 0000000..82c1a97
--- /dev/null
+++ b/youtube/templates/watch.html
@@ -0,0 +1,230 @@
+{% set page_title = title %}
+{% extends "base.html" %}
+{% 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;
+            }
+
+            #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;
+                    }
+{% 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>
+
+                {% if comments_info %}
+                    {{ comments.video_comments(comments_info) }}
+                {% endif %}
+                </article>
+
+
+
+
+                <nav id="related">
+                    {% for info in related %}
+                        {{ common_elements.item(info) }}
+                    {% endfor %}
+                </nav>
+
+{% endblock main %}