Refactor search page

author: James Taylor <user234683@users.noreply.github.com> 2019-06-21 21:41:41 -0700
committer: James Taylor <user234683@users.noreply.github.com> 2019-06-21 21:41:41 -0700
commit: 1156b0998758ee803c7e8ae0cc2beb5181c232a3 (patch)
tree: 781c8d34c0de049327fd2d3f9085dc9877748acc /youtube/templates
parent: e33bae2e50799e3617432f294cf36581404a5114 (diff)
download: yt-local-1156b0998758ee803c7e8ae0cc2beb5181c232a3.tar.lz
yt-local-1156b0998758ee803c7e8ae0cc2beb5181c232a3.tar.xz
yt-local-1156b0998758ee803c7e8ae0cc2beb5181c232a3.zip
3 files changed, 209 insertions, 1 deletions
diff --git a/youtube/templates/base.html b/youtube/templates/base.html
index e98f972..eafd369 100644
--- a/youtube/templates/base.html
+++ b/youtube/templates/base.html
@@ -2,13 +2,14 @@
 <html>
     <head>
         <meta charset="utf-8">
-        <title>{% block page_title %}{% endblock %}</title>
+        <title>{% block page_title %}{{ title }}{% endblock %}</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">
 {% block style %}
+{{ style }}
 {% endblock %}
         </style>
     </head>
@@ -105,6 +106,7 @@
         </header>
         <main>
 {% block main %}
+{{ main }}
 {% endblock %}
         </main>
     </body>
diff --git a/youtube/templates/common_elements.html b/youtube/templates/common_elements.html
new file mode 100644
index 0000000..9f2aa3f
--- /dev/null
+++ b/youtube/templates/common_elements.html
@@ -0,0 +1,152 @@
+{% macro text_runs(runs) %}
+    {%- if runs[0] is mapping -%}
+        {%- for text_run in runs -%}
+            {%- if text_run.get("bold", false) -%}
+                <b>{{ text_run["text"] }}</b>
+            {%- elif text_run.get('italics', false) -%}
+                <i>{{ text_run["text"] }}</i>
+            {%- else -%}
+                {{ text_run["text"] }}
+            {%- endif -%}
+        {%- endfor -%}
+    {%- else -%}
+        {{ runs }}
+    {%- endif -%}
+{% endmacro %}
+
+{% macro small_item(info) %}
+    <div class="small-item-box">
+        <div class="small-item">
+            {% if info['type'] == 'video' %}
+                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
+                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
+                    <span class="video-duration">{{ info['duration'] }}</span>
+                </a>
+                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
+                
+                <address>{{ info['author'] }}</address>
+                <span class="views">{{ info['views'] }}</span>
+
+            {% elif info['type'] == 'playlist' %}
+                <a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
+                    <img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
+                    <div class="playlist-thumbnail-info">
+                        <span>{{ info['size'] }}</span>
+                    </div>
+                </a>
+                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
+                
+                <address>{{ info['author'] }}</address>
+            {% else %}
+                Error: unsupported item type
+            {% endif %}
+        </div>
+        {% if info['type'] == 'video' %}
+            <input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
+        {% endif %}
+    </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>
+    {% endif %}
+    {% if 'views' is in(info) %}
+        <span class="views">{{ info['views'] }}</span>
+    {% endif %}
+    {% if 'published' is in(info) %}
+        <time>{{ info['published'] }}</time>
+    {% endif %}
+{% endmacro %}
+
+
+
+{% macro medium_item(info) %}
+    <div class="medium-item-box">
+        <div class="medium-item">
+            {% if info['type'] == 'video' %}
+                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
+                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
+                    <span class="video-duration">{{ info['duration'] }}</span>
+                </a>
+
+                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
+                
+                <div class="stats">
+                    {{ get_stats(info) }}
+                </div>
+
+                <span class="description">{{ text_runs(info['description']) }}</span>
+                <span class="badges">{{ info['badges']|join(' | ') }}</span>
+            {% elif info['type'] == 'playlist' %}
+                <a class="playlist-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
+                    <img class="playlist-thumbnail-img" src="{{ info['thumbnail'] }}">
+                    <div class="playlist-thumbnail-info">
+                        <span>{{ info['size'] }}</span>
+                    </div>
+                </a>
+
+                <a class="title" href="{{ info['url'] }}" title="{{ info['title'] }}">{{ info['title'] }}</a>
+                
+                <div class="stats">
+                    {{ get_stats(info) }}
+                </div>
+            {% elif info['type'] == 'channel' %}
+                <a class="video-thumbnail-box" href="{{ info['url'] }}" title="{{ info['title'] }}">
+                    <img class="video-thumbnail-img" src="{{ info['thumbnail'] }}">
+                </a>
+
+                <a class="title" href="{{ info['url'] }}">{{ info['title'] }}</a>
+                
+                <span>{{ info['subscriber_count'] }}</span>
+                <span>{{ info['size'] }}</span>
+
+                <span class="description">{{ text_runs(info['description']) }}</span>
+            {% else %}
+                Error: unsupported item type
+            {% endif %}
+        </div>
+        {% if info['type'] == 'video' %}
+            <input class="item-checkbox" type="checkbox" name="video_info_list" value="{{ info['video_info'] }}" form="playlist-edit">
+        {% endif %}
+    </div>
+{% endmacro %}
+
+
+{% macro item(info) %}
+    {% if info['item_size'] == 'small' %}
+        {{ small_item(info) }}
+    {% elif info['item_size'] == 'medium' %}
+        {{ medium_item(info) }}
+    {% else %}
+        Error: Unknown item size
+    {% endif %}
+{% endmacro %}
+
+
+
+{% macro page_buttons(estimated_pages, url, parameters_dictionary) %}
+    {% set current_page = parameters_dictionary.get('page', 1)|int %}
+    {% set parameters_dictionary = parameters_dictionary.to_dict() %}
+    {% if current_page is le(5) %}
+        {% set page_start = 1 %}
+        {% set page_end = [9, estimated_pages]|min %}
+    {% else %}
+        {% set page_start = current_page - 4 %}
+        {% set page_end = [current_page + 4, estimated_pages]|min %}
+    {% endif %}
+
+    {% for page in range(page_start, page_end+1) %}
+        {% if page == current_page %}
+            <div class="page-button">{{ page }}</div>
+        {% else %}
+            {# IMPORTANT: Jinja SUCKS #}
+            {# https://stackoverflow.com/questions/36886650/how-to-add-a-new-entry-into-a-dictionary-object-while-using-jinja2 #}
+            {% set _ = parameters_dictionary.__setitem__('page', page) %}
+            <a class="page-button" href="{{ url + '?' + parameters_dictionary|urlencode }}">{{ page }}</a>
+        {% endif %}
+    {% endfor %}
+
+{% endmacro %}
diff --git a/youtube/templates/search.html b/youtube/templates/search.html
new file mode 100644
index 0000000..1086cfd
--- /dev/null
+++ b/youtube/templates/search.html
@@ -0,0 +1,54 @@
+{% set search_box_value = query %}
+{% extends "base.html" %}
+{% block page_title %}{{ query + ' - Search' }}{% endblock %}
+{% import "common_elements.html" as common_elements %}
+{% block style %}
+            main{
+                display:grid;
+                grid-template-columns: minmax(0px, 1fr) 800px minmax(0px,2fr);
+                max-width:100vw;
+            }
+                
+
+            #number-of-results{
+                font-weight:bold;
+            }
+            #result-info{
+                grid-row: 1;
+                grid-column:2;
+                align-self:center;
+            }
+            .page-button-row{
+                grid-column: 2;
+                justify-self: center;
+            }
+
+
+            .item-list{
+                grid-row: 2;
+                grid-column: 2;
+            }
+            .badge{
+                background-color:#cccccc;
+            }
+{% endblock style %}
+
+{% block main %}
+            <div id="result-info">
+                <div id="number-of-results">Approximately {{ '{:,}'.format(estimated_results) }} results ({{ '{:,}'.format(estimated_pages) }} pages)</div>
+{% if corrections['type'] == 'showing_results_for' %}
+                <div>Showing results for <a>{{ corrections['corrected_query']|safe }}</a></div>
+                <div>Search instead for <a href="{{ corrections['original_query_url'] }}">{{ corrections['original_query'] }}</a></div>
+{% elif corrections['type'] == 'did_you_mean' %}
+                <div>Did you mean <a href="{{ corrections['corrected_query_url'] }}">{{ corrections['corrected_query']|safe }}</a></div>
+{% endif %}
+            </div>
+            <div class="item-list">
+                {% for info in results %}
+                    {{ common_elements.item(info) }}
+                {% endfor %}
+            </div>
+            <nav class="page-button-row">
+                {{ common_elements.page_buttons(estimated_pages, '/https://www.youtube.com/search', parameters_dictionary) }}
+            </nav>
+{% endblock main %}
author	James Taylor <user234683@users.noreply.github.com>	2019-06-21 21:41:41 -0700
committer	James Taylor <user234683@users.noreply.github.com>	2019-06-21 21:41:41 -0700
commit	1156b0998758ee803c7e8ae0cc2beb5181c232a3 (patch)
tree	781c8d34c0de049327fd2d3f9085dc9877748acc /youtube/templates
parent	e33bae2e50799e3617432f294cf36581404a5114 (diff)
download	yt-local-1156b0998758ee803c7e8ae0cc2beb5181c232a3.tar.lz yt-local-1156b0998758ee803c7e8ae0cc2beb5181c232a3.tar.xz yt-local-1156b0998758ee803c7e8ae0cc2beb5181c232a3.zip