Convert playlist page to flask framework

3 files changed, 136 insertions, 34 deletions

diff --git a/youtube/playlist.py b/youtube/playlist.py
index fbe6448..18ddf49 100644
--- a/youtube/playlist.py
+++ b/youtube/playlist.py
@@ -1,4 +1,5 @@
-from youtube import util, yt_data_extract, html_common, template, proto
+from youtube import util, yt_data_extract, proto
+from youtube import yt_app
 
 import base64
 import urllib
@@ -6,10 +7,8 @@ import json
 import string
 import gevent
 import math
-
-with open("yt_playlist_template.html", "r") as file:
-    yt_playlist_template = template.Template(file.read())
-
+from flask import request
+import flask
 
 
 
@@ -76,14 +75,15 @@ def get_videos(playlist_id, page):
     return info
 
 
-playlist_stat_template = string.Template('''
-<div>$stat</div>''')
-def get_playlist_page(env, start_response):
-    start_response('200 OK', [('Content-type','text/html'),])
-    parameters = env['parameters']
-    playlist_id = parameters['list'][0]
-    page = parameters.get("page", "1")[0]
-    if page == "1":
+@yt_app.route('/playlist')
+def get_playlist_page():
+    if 'list' not in request.args:
+        abort(400)
+
+    playlist_id = request.args.get('list')
+    page = request.args.get('page', '1')
+
+    if page == '1':
         first_page_json = playlist_first_page(playlist_id)
         this_page_json = first_page_json
     else:
@@ -98,26 +98,20 @@ def get_playlist_page(env, start_response):
         video_list = this_page_json['response']['contents']['singleColumnBrowseResultsRenderer']['tabs'][0]['tabRenderer']['content']['sectionListRenderer']['contents'][0]['itemSectionRenderer']['contents'][0]['playlistVideoListRenderer']['contents']
     except KeyError:    # other pages
         video_list = this_page_json['response']['continuationContents']['playlistVideoListContinuation']['contents']
-    videos_html = ''
-    for video_json in video_list:
-        info = yt_data_extract.renderer_info(video_json['playlistVideoRenderer'])
-        videos_html += html_common.video_item_html(info, html_common.small_video_item_template)
 
+    parsed_video_list = [yt_data_extract.parse_info_prepare_for_html(video_json) for video_json in video_list]
+
+
+    metadata = yt_data_extract.renderer_info(first_page_json['response']['header'])
+    yt_data_extract.prefix_urls(metadata)
 
-    metadata = yt_data_extract.renderer_info(first_page_json['response']['header']['playlistHeaderRenderer'])
     video_count = int(metadata['size'].replace(',', ''))
-    page_buttons = html_common.page_buttons_html(int(page), math.ceil(video_count/20), util.URL_ORIGIN + "/playlist", env['QUERY_STRING'])
-
-    html_ready = html_common.get_html_ready(metadata)
-    html_ready['page_title'] = html_ready['title'] + ' - Page ' + str(page)
-
-    stats = ''
-    stats += playlist_stat_template.substitute(stat=html_ready['size'] + ' videos')
-    stats += playlist_stat_template.substitute(stat=html_ready['views'])
-    return yt_playlist_template.substitute(
-        header          = html_common.get_header(),
-        videos          = videos_html,
-        page_buttons    = page_buttons,
-        stats = stats,
-        **html_ready
+    metadata['size'] += ' videos'
+
+    return flask.render_template('playlist.html',
+        video_list = parsed_video_list,
+        num_pages = math.ceil(video_count/20),
+        parameters_dictionary = request.args,
+
+        **metadata
     ).encode('utf-8')
diff --git a/youtube/templates/playlist.html b/youtube/templates/playlist.html
new file mode 100644
index 0000000..09e382b
--- /dev/null
+++ b/youtube/templates/playlist.html
@@ -0,0 +1,106 @@
+{% extends "base.html" %}
+{% block page_title %}{{ title + ' - Page ' + parameters_dictionary.get('page', '1') }}{% endblock %}
+{% import "common_elements.html" as common_elements %}
+{% block style %}
+    main{
+        display:grid;
+        grid-template-columns: 3fr 1fr;
+    }
+
+
+        
+    #left{
+        grid-column: 1;
+        grid-row: 1;
+        
+        display: grid;
+        grid-template-columns: 1fr 800px;
+        grid-template-rows: 0fr 1fr 0fr;
+    }
+        .playlist-metadata{
+            grid-column:2;
+            grid-row:1;
+
+            display:grid;
+            grid-template-columns: 0fr 1fr;
+        }
+            .playlist-thumbnail{
+                grid-row: 1 / span 5;
+                grid-column:1;
+                justify-self:start;
+                width:250px;
+                margin-right: 10px;
+            }
+            .playlist-title{
+                grid-row: 1;
+                grid-column:2;
+            }
+            .playlist-author{
+                grid-row:2;
+                grid-column:2;
+            }
+            .playlist-stats{
+                grid-row:3;
+                grid-column:2;
+            }
+            
+            .playlist-description{
+                grid-row:4;
+                grid-column:2;
+                min-width:0px;
+                white-space: pre-line;
+            }
+        .page-button-row{
+            grid-row: 3;
+            grid-column: 2;
+            justify-self: center;
+        }
+    
+    
+    #right{
+        grid-column: 2;
+        grid-row: 1;
+
+    }
+    #results{
+        
+        grid-row: 2;
+        grid-column: 2;
+        margin-top:10px;
+        
+        display: grid;
+        grid-auto-rows: 0fr;
+        grid-row-gap: 10px;
+        
+    }
+{% endblock style %}
+
+{% block main %}
+    <div id="left">
+        <div class="playlist-metadata">
+            <img class="playlist-thumbnail" src="{{ thumbnail }}">
+            <h2 class="playlist-title">{{ title }}</h2>
+            <a class="playlist-author" href="{{ author_url }}">{{ author }}</a>
+            <div class="playlist-stats">
+                <div>{{ views }}</div>
+                <div>{{ size }}</div>
+            </div>
+            <div class="playlist-description">{{ description }}</div>
+        </div>
+
+        <div id="results">          
+            {% for info in video_list %}
+                {{ common_elements.item(info) }}
+            {% endfor %}
+        </div>
+        <nav class="page-button-row">
+            {{ common_elements.page_buttons(num_pages, '/https://www.youtube.com/playlist', parameters_dictionary) }}
+        </nav>
+    </div>
+{% endblock main %}
+
+
+
+
+
+
diff --git a/youtube/yt_data_extract.py b/youtube/yt_data_extract.py
index a487c57..a42b6a2 100644
--- a/youtube/yt_data_extract.py
+++ b/youtube/yt_data_extract.py
@@ -200,12 +200,12 @@ def renderer_info(renderer, additional_info={}):
 
     info.update(additional_info)
 
-    if type.startswith('compact'):
+    if type.startswith('compact') or type.startswith('playlist') or type.startswith('grid'):
         info['item_size'] = 'small'
     else:
         info['item_size'] = 'medium'
 
-    if type in ('compactVideoRenderer', 'videoRenderer', 'gridVideoRenderer'):
+    if type in ('compactVideoRenderer', 'videoRenderer', 'playlistVideoRenderer', 'gridVideoRenderer'):
         info['type'] = 'video'
     elif type in ('playlistRenderer', 'compactPlaylistRenderer', 'gridPlaylistRenderer',
                   'radioRenderer', 'compactRadioRenderer', 'gridRadioRenderer',
@@ -213,6 +213,8 @@ def renderer_info(renderer, additional_info={}):
         info['type'] = 'playlist'
     elif type == 'channelRenderer':
         info['type'] = 'channel'
+    elif type == 'playlistHeaderRenderer':
+        info['type'] = 'playlist_metadata'
     else:
         info['type'] = 'unsupported'
         return info