Convert channel page to flask framework

2 files changed, 158 insertions, 12 deletions

diff --git a/youtube/templates/channel.html b/youtube/templates/channel.html
new file mode 100644
index 0000000..8a3f279
--- /dev/null
+++ b/youtube/templates/channel.html
@@ -0,0 +1,144 @@
+{% extends "base.html" %}
+{% block page_title %}{{ channel_name + ' - Channel' }}{% endblock %}
+{% import "common_elements.html" as common_elements %}
+{% block style %}
+    main{
+        display:grid;
+{% if current_tab == 'about' %}
+        grid-template-rows: 0fr 0fr 1fr;
+        grid-template-columns: 0fr 1fr;
+{% else %}
+        grid-template-rows: repeat(5, 0fr);
+        grid-template-columns: auto 1fr;
+{% endif %}
+    }
+        main .avatar{
+            grid-row:1;
+            grid-column:1;
+            height:200px;
+            width:200px;
+        }
+        main .title{
+            grid-row:1;
+            grid-column:2;                
+        }
+        main .channel-tabs{
+            grid-row:2;
+            grid-column: 1 / span 2;
+            
+            display:grid;
+            grid-auto-flow: column;
+            justify-content:start;
+            
+            background-color: #aaaaaa;
+            padding: 3px;
+        }
+        #links-metadata{
+            display: grid;
+            grid-auto-flow: column;
+            grid-column-gap: 10px;
+            grid-column: 1/span 2;
+            justify-content: start;
+            padding-top: 8px;
+            padding-bottom: 8px;
+            background-color: #bababa;
+            margin-bottom: 10px;
+        }
+            #number-of-results{
+                font-weight:bold;
+            }
+        .item-grid{
+            grid-row:4;
+            grid-column: 1 / span 2;
+        }
+        .item-list{
+            width:1000px;
+            grid-column: 1 / span 2;
+        }
+        .page-button-row{
+            grid-column: 1 / span 2;
+        }
+        .tab{
+            padding: 5px 75px;
+        }
+        main .channel-info{
+            grid-row: 3;
+            grid-column: 1 / span 3;
+        }
+        .description{
+            white-space: pre-wrap;
+            min-width: 0;
+        
+        }
+{% endblock style %}
+
+{% block main %}     
+    <img class="avatar" src="{{ avatar }}">
+    <h2 class="title">{{ channel_name }}</h2>
+    <nav class="channel-tabs">
+        {% for tab_name in ('Videos', 'Playlists', 'About') %}
+            {% if tab_name.lower() == current_tab %}
+                <a class="tab page-button">{{ tab_name }}</a>
+            {% else %}
+                <a class="tab page-button" href="{{ channel_url + '/' + tab_name.lower() }}">{{ tab_name }}</a>
+            {% endif %}
+        {% endfor %}
+
+        <form class="channel-search" action="{{ channel_url + '/search' }}">
+            <input type="search" name="query" class="search-box" value="{{ search_box_value }}">
+            <button type="submit" value="Search" class="search-button">Search</button>
+        </form>
+    </nav>
+    {% if current_tab == 'about' %}
+        <div class="channel-info">
+            <ul>
+                {% for stat in stats %}
+                    <li>{{ stat }}</li>
+                {% endfor %}
+            </ul>
+            <hr>
+            <h3>Description</h3>
+            <span class="description">{{ common_elements.text_runs(description) }}</span>
+            <hr>
+            <ul>
+                {% for text, url in links %}
+                    <li><a href="{{ url }}">{{ text }}</a></li>
+                {% endfor %}
+            </ul>
+        </div>
+    {% else %}
+        <div id="links-metadata">
+            {% if current_tab == 'videos' %}
+                {% set sorts = [('1', 'views'), ('2', 'oldest'), ('3', 'newest')] %}
+                <div id="number-of-results">{{ number_of_videos }} videos</div>
+            {% elif current_tab == 'playlists' %}
+                {% set sorts = [('2', 'oldest'), ('3', 'newest'), ('4', 'last video added')] %}
+            {% else %}
+                {% set sorts = [] %}
+            {% endif %}
+
+            {% for sort_number, sort_name in sorts %}
+                {% if sort_number == current_sort.__str__() %}
+                    <a class="sort-button">{{ 'Sorted by ' + sort_name }}</a>
+                {% else %}
+                    <a class="sort-button" href="{{ channel_url + '/' + current_tab + '?sort=' + sort_number }}">{{ 'Sort by ' + sort_name }}</a>
+                {% endif %}
+            {% endfor %}
+        </div>
+
+        {% if current_tab != 'about' %}
+            <nav class="{{ 'item-list' if current_tab == 'search' else 'item-grid' }}">
+                {% for item_info in items %}
+                    {{ common_elements.item(item_info, include_author=false) }}
+                {% endfor %}
+            </nav>
+
+            {% if current_tab != 'playlists' %}
+                <nav class="page-button-row">
+                    {{ common_elements.page_buttons(number_of_pages, channel_url + '/' + current_tab, parameters_dictionary) }}
+                </nav>
+            {% endif %}
+        {% endif %}
+
+    {% endif %}
+{% endblock main %}
diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html
index b140332..0843c4b 100644
--- a/youtube/templates/common_elements.html
+++ b/youtube/templates/common_elements.html
@@ -14,7 +14,7 @@
     {%- endif -%}
 {% endmacro %}
 
-{% macro small_item(info) %}
+{% macro small_item(info, include_author=true) %}
     <div class="small-item-box">
         <div class="small-item">
             {% if info['type'] == 'video' %}
@@ -47,11 +47,13 @@
     </div>
 {% endmacro %}
 
-{% macro get_stats(info) %}
-    {% if 'author_url' is in(info) %}
-        <address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address>
-    {% else %}
-        <address><b>{{ info['author'] }}</b></address>
+{% macro get_stats(info, include_author=true) %}
+    {% if include_author %}
+        {% if 'author_url' is in(info) %}
+            <address>By <a href="{{ info['author_url'] }}">{{ info['author'] }}</a></address>
+        {% else %}
+            <address><b>{{ info['author'] }}</b></address>
+        {% endif %}
     {% endif %}
     {% if 'views' is in(info) %}
         <span class="views">{{ info['views'] }}</span>
@@ -63,7 +65,7 @@
 
 
 
-{% macro medium_item(info) %}
+{% macro medium_item(info, include_author=true) %}
     <div class="medium-item-box">
         <div class="medium-item">
             {% if info['type'] == 'video' %}
@@ -75,7 +77,7 @@
                 <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
                 
                 <div class="stats">
-                    {{ get_stats(info) }}
+                    {{ get_stats(info, include_author) }}
                 </div>
 
                 <span class="description">{{ text_runs(info.get('description', '')) }}</span>
@@ -91,7 +93,7 @@
                 <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
                 
                 <div class="stats">
-                    {{ get_stats(info) }}
+                    {{ get_stats(info, include_author) }}
                 </div>
             {% elif info['type'] == 'channel' %}
                 <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
@@ -115,11 +117,11 @@
 {% endmacro %}
 
 
-{% macro item(info) %}
+{% macro item(info, include_author=true) %}
     {% if info['item_size'] == 'small' %}
-        {{ small_item(info) }}
+        {{ small_item(info, include_author) }}
     {% elif info['item_size'] == 'medium' %}
-        {{ medium_item(info) }}
+        {{ medium_item(info, include_author) }}
     {% else %}
         Error: Unknown item size
     {% endif %}