front-end support for adding to playlists

15 files changed, 106 insertions, 279 deletions

diff --git a/youtube/channel.py b/youtube/channel.py
index 4d7b563..6fd0dbd 100644
--- a/youtube/channel.py
+++ b/youtube/channel.py
@@ -156,6 +156,7 @@ def channel_videos_html(polymer_json, current_page=1, number_of_videos = 1000, c
     items_html = grid_items_html(items, {'author': microformat['title']})
     
     return yt_channel_items_template.substitute(
+        header              = common.get_header(),
         channel_title       = microformat['title'],
         channel_tabs        = channel_tabs_html(channel_id, 'Videos'),
         avatar              = '/' + microformat['thumbnail']['thumbnails'][0]['url'],
@@ -190,6 +191,7 @@ def channel_playlists_html(polymer_json):
     items_html = grid_items_html(items, {'author': microformat['title']})
     
     return yt_channel_items_template.substitute(
+        header              = common.get_header(),
         channel_title       = microformat['title'],
         channel_tabs        = channel_tabs_html(channel_id, 'Playlists'),
         avatar              = '/' + microformat['thumbnail']['thumbnails'][0]['url'],
@@ -227,6 +229,7 @@ def channel_about_page(polymer_json):
     except KeyError:
         description = ''
     return yt_channel_about_template.substitute(
+        header              = common.get_header(),
         page_title          = common.get_plain_text(channel_metadata['title']) + ' - About',
         channel_title       = common.get_plain_text(channel_metadata['title']),
         avatar              = html.escape(avatar),
diff --git a/youtube/comments.py b/youtube/comments.py
index 523a410..4a00292 100644
--- a/youtube/comments.py
+++ b/youtube/comments.py
@@ -1,5 +1,5 @@
 import json
-import youtube.proto as proto
+from youtube import proto, common
 import base64
 from youtube.common import uppercase_escape, default_multi_get, format_text_runs, URL_ORIGIN, fetch_url
 from string import Template
@@ -98,8 +98,8 @@ def request_comments(ctoken, replies=False):
             print("got <!DOCTYPE>, retrying")
             continue
         break
-    '''with open('debug/comments_debug', 'wb') as f:
-        f.write(content)'''
+    with open('debug/comments_debug', 'wb') as f:
+        f.write(content)
     return content
 
 def parse_comments(content, replies=False):
@@ -181,6 +181,7 @@ def get_comments_page(query_string):
         more_comments_button = more_comments_template.substitute(url = URL_ORIGIN + '/comments?ctoken=' + ctoken)
 
     return yt_comments_template.substitute(
+        header = common.get_header(),
         comments = comments_html,
         page_title = 'Comments',
         more_comments_button=more_comments_button,
diff --git a/youtube/common.py b/youtube/common.py
index 3ee952d..f0d6694 100644
--- a/youtube/common.py
+++ b/youtube/common.py
@@ -1,4 +1,5 @@
 from youtube.template import Template
+from youtube import local_playlist
 import html
 import json
 import re
@@ -280,8 +281,33 @@ def medium_video_item_html(medium_video_info):
         )
 
 
-
-
+header_template = Template('''
+        <header>
+            <div id="header-left">
+                <form id="site-search" action="/youtube.com/search">
+                    <input type="search" name="query" class="search-box">
+                    <button type="submit" value="Search" class="search-button">Search</button>
+                </form>
+            </div>
+            <div id="header-right">
+                <form id="playlist-add" action="/youtube.com/edit_playlist" method="post" target="_self">
+                    <input type="hidden" name="action" value="add">
+                    <input name="playlist_name" id="playlist-name-selection" list="playlist-options" type="text">
+                    <datalist id="playlist-options">
+$playlists
+                    </datalist>
+                    <button type="submit" id="playlist-add-button">Add to playlist</button>
+                    <button type="reset" id="item-selection-reset">Clear selection</button>
+                </form>
+            </div>
+        </header>
+''')
+playlist_option_template = Template('''<option value="$name">$name</option>''')
+def get_header():
+    playlists = ''
+    for name in local_playlist.get_playlist_names():
+        playlists += playlist_option_template.substitute(name = name)
+    return header_template.substitute(playlists=playlists)
 
 
 
diff --git a/youtube/local_playlist.py b/youtube/local_playlist.py
index 057555a..5a4182b 100644
--- a/youtube/local_playlist.py
+++ b/youtube/local_playlist.py
@@ -1,13 +1,19 @@
-import os.path
+import os
 import json
 
 playlists_directory = os.path.normpath("data/playlists")
 
 def add_to_playlist(name, video_info_list):
-    with open(os.path.join(playlists_directory, name), "a", encoding='utf-8') as file:
+    with open(os.path.join(playlists_directory, name + ".txt"), "a", encoding='utf-8') as file:
         for info in video_info_list:
             file.write(info + "\n")
         
         
 def get_playlist_page(name):
-    pass
\ No newline at end of file
+    pass
+
+def get_playlist_names():
+    for item in os.listdir(playlists_directory):
+        name, ext = os.path.splitext(item)
+        if ext == '.txt':
+            yield name
\ No newline at end of file
diff --git a/youtube/playlist.py b/youtube/playlist.py
index 3951b24..d146b92 100644
--- a/youtube/playlist.py
+++ b/youtube/playlist.py
@@ -115,6 +115,7 @@ def get_playlist_page(query_string):
     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          = common.get_header(),
         videos          = videos_html,
         page_buttons    = page_buttons,
         stats = stats,
diff --git a/youtube/search.py b/youtube/search.py
index 9596727..09a161e 100644
--- a/youtube/search.py
+++ b/youtube/search.py
@@ -129,6 +129,7 @@ def get_search_page(query_string, parameters=()):
         
     
     result = Template(yt_search_results_template).substitute(
+        header              = common.get_header(),
         results             = result_list_html, 
         page_title          = query + " - Search", 
         search_box_value    = html.escape(query),
diff --git a/youtube/shared.css b/youtube/shared.css
index 240fd5c..340e164 100644
--- a/youtube/shared.css
+++ b/youtube/shared.css
@@ -23,6 +23,9 @@ body{
         background-color:#333333;
 
         grid-row: 1;
+
+        display:grid;
+        grid-template-columns: 3fr 2fr;
     }
 
     main{
@@ -35,28 +38,62 @@ button{
 address{
     font-style:normal;
 }
-#site-search{           
-    display: grid;
-    grid-template-columns: 1fr 0fr;
 
+#header-left{
+    grid-column:1;
+    
+    display:grid;
+    grid-template-columns: 1fr 640px;
 }
-
-    #site-search .search-box{
-        align-self:center;
-        height:25px;
-        border:0;
-        
-        grid-column: 1;
-    }
-    #site-search .search-button{
+    #site-search{
         grid-column: 2;
-        align-self:center;
-        height:25px;
+        display: grid;
+        grid-template-columns: 1fr 0fr;
 
-        border-style:solid;
-        border-width:1px;
     }
+
+        #site-search .search-box{
+            align-self:center;
+            height:25px;
+            border:0;
+            
+            grid-column: 1;
+        }
+        #site-search .search-button{
+            grid-column: 2;
+            align-self:center;
+            height:25px;
+
+            border-style:solid;
+            border-width:1px;
+        }
+ 
+#header-right{
+    grid-column:2;
     
+    display:grid;
+    grid-template-columns:40px 400px 100px 1fr;
+    grid-template-rows: 1fr 1fr;
+}
+    #playlist-add{
+        display:contents;
+    }
+        #playlist-name-selection{
+            grid-column:2;
+            grid-row:1;
+            justify-self:start;
+        }
+        #playlist-add-button{
+            grid-column:2;
+            grid-row:2;
+            justify-self:start;
+        }
+        #item-selection-reset{
+            grid-column:3;
+            grid-row:2;
+            justify-self:center;
+        }
+   
 .item-list{
     display: grid;
     grid-auto-rows: 138px;
diff --git a/youtube/watch.py b/youtube/watch.py
index 6e1efbc..895f9bf 100644
--- a/youtube/watch.py
+++ b/youtube/watch.py
@@ -278,6 +278,7 @@ def get_watch_page(query_string):
         page = yt_watch_template.substitute(
             video_title=html.escape(info["title"]),
             page_title=html.escape(info["title"]),
+            header=common.get_header(),
             uploader=html.escape(info["uploader"]),
             uploader_channel_url='/' + info["uploader_url"],
             #upload_date=datetime.datetime.fromtimestamp(info["timestamp"]).strftime("%d %b %Y %H:%M:%S"),
diff --git a/yt_channel_about_template.html b/yt_channel_about_template.html
index 7eba673..63af6f1 100644
--- a/yt_channel_about_template.html
+++ b/yt_channel_about_template.html
@@ -5,44 +5,6 @@
         <title>$page_title</title>
         <link href="/youtube.com/shared.css" type="text/css" rel="stylesheet">
         <style type="text/css">
-            header{
-                display:grid;
-                grid-template-columns: 3fr 2fr;
-            }
-                #header-left{
-                    grid-column:1;
-                    
-                    display:grid;
-                    grid-template-columns: 1fr 640px;
-                }
-                    #site-search{
-                        grid-column: 2;
-                    }
-                #header-right{
-                    grid-column:2;
-                    
-                    display:grid;
-                    grid-template-columns:40px 400px 100px 1fr;
-                    grid-template-rows: 1fr 1fr;
-                }
-                    #playlist-add{
-                        display:contents;
-                    }
-                        #playlist-name-selection{
-                            grid-column:2;
-                            grid-row:1;
-                            justify-self:start;
-                        }
-                        #playlist-add-button{
-                            grid-column:2;
-                            grid-row:2;
-                            justify-self:start;
-                        }
-                        #item-selection-reset{
-                            grid-column:3;
-                            grid-row:2;
-                            justify-self:center;
-                        }
             main{
                 display:grid;
                 grid-template-rows: 0fr 0fr 1fr;
@@ -82,24 +44,7 @@
         </style>
     </head>
     <body>
-        <header>
-            <div id="header-left">
-                <form id="site-search" action="/youtube.com/search">
-                    <input type="search" name="query" class="search-box">
-                    <button type="submit" value="Search" class="search-button">Search</button>
-                </form>
-            </div>
-            <div id="header-right">
-                <form id="playlist-add" action="/youtube.com/edit_playlist" method="post" target="_self">
-                    <input type="hidden" name="action" value="add">
-                    <select name="playlist_name" id="playlist-name-selection">
-                        <option value="watch_later">watch_later</option>
-                    </select>
-                    <button type="submit" id="playlist-add-button">Add to playlist</button>
-                    <button type="reset" id="item-selection-reset">Clear selection</button>
-                </form>
-            </div>
-        </header>
+$header
         <main>       
             <img class="avatar" src="$avatar">
             <h2 class="title">$channel_title</h2>
diff --git a/yt_channel_items_template.html b/yt_channel_items_template.html
index 53e5901..169d2d5 100644
--- a/yt_channel_items_template.html
+++ b/yt_channel_items_template.html
@@ -5,44 +5,6 @@
         <title>$page_title</title>
         <link href="/youtube.com/shared.css" type="text/css" rel="stylesheet">
         <style type="text/css">
-            header{
-                display:grid;
-                grid-template-columns: 3fr 2fr;
-            }
-                #header-left{
-                    grid-column:1;
-                    
-                    display:grid;
-                    grid-template-columns: 1fr 640px;
-                }
-                    #site-search{
-                        grid-column: 2;
-                    }
-                #header-right{
-                    grid-column:2;
-                    
-                    display:grid;
-                    grid-template-columns:40px 400px 100px 1fr;
-                    grid-template-rows: 1fr 1fr;
-                }
-                    #playlist-add{
-                        display:contents;
-                    }
-                        #playlist-name-selection{
-                            grid-column:2;
-                            grid-row:1;
-                            justify-self:start;
-                        }
-                        #playlist-add-button{
-                            grid-column:2;
-                            grid-row:2;
-                            justify-self:start;
-                        }
-                        #item-selection-reset{
-                            grid-column:3;
-                            grid-row:2;
-                            justify-self:center;
-                        }
             main{
                 display:grid;
                 grid-template-rows: 0fr 0fr 0fr 1fr;
@@ -86,24 +48,7 @@
         </style>
     </head>
     <body>
-        <header>
-            <div id="header-left">
-                <form id="site-search" action="/youtube.com/search">
-                    <input type="search" name="query" class="search-box">
-                    <button type="submit" value="Search" class="search-button">Search</button>
-                </form>
-            </div>
-            <div id="header-right">
-                <form id="playlist-add" action="/youtube.com/edit_playlist" method="post" target="_self">
-                    <input type="hidden" name="action" value="add">
-                    <select name="playlist_name" id="playlist-name-selection">
-                        <option value="watch_later">watch_later</option>
-                    </select>
-                    <button type="submit" id="playlist-add-button">Add to playlist</button>
-                    <button type="reset" id="item-selection-reset">Clear selection</button>
-                </form>
-            </div>
-        </header>
+$header
         <main>       
             <img class="avatar" src="$avatar">
             <h2 class="title">$channel_title</h2>
diff --git a/yt_comments_template.html b/yt_comments_template.html
index 6569660..a59a379 100644
--- a/yt_comments_template.html
+++ b/yt_comments_template.html
@@ -10,20 +10,6 @@
                 display:grid;
                 grid-template-columns: 3fr 2fr;
             }
-
-            header{
-                display:grid;
-                grid-template-columns: 3fr 2fr;
-            }
-                #header-left{
-                    grid-column:1;
-                    
-                    display:grid;
-                    grid-template-columns: 1fr 640px;
-                }
-                    #site-search{
-                        grid-column: 2;
-                    }
             #left{
                 background-color:#bcbcbc;
                 
@@ -42,14 +28,7 @@
         </style>
     </head>
     <body>
-        <header>
-            <div id="header-left">
-                <form id="site-search" action="/youtube.com/search">
-                    <input type="search" name="query" class="search-box">
-                    <button type="submit" value="Search" class="search-button">Search</button>
-                </form>
-            </div>
-        </header>
+$header
         <main>
             <div id="left">
                 <section class="comments">
diff --git a/yt_playlist_template.html b/yt_playlist_template.html
index 6dbfe30..c237695 100644
--- a/yt_playlist_template.html
+++ b/yt_playlist_template.html
@@ -11,18 +11,8 @@
             }
 
             header{
-                display:grid;
                 grid-template-columns: 3fr 1fr;
             }
-                #header-left{
-                    grid-column:1;
-                    
-                    display:grid;
-                    grid-template-columns: 1fr 800px;
-                }
-                    #site-search{
-                        grid-column: 2;
-                    }
                 
             #left{
                 grid-column: 1;
@@ -91,14 +81,7 @@
         </style>
     </head>
     <body>
-        <header>
-            <div id="header-left">
-                <form id="site-search" action="/youtube.com/search">
-                    <input type="search" name="query" class="search-box">
-                    <button type="submit" value="Search" class="search-button">Search</button>
-                </form>
-            </div>
-        </header>
+$header
         <main>
             <div id="left">
                 <div class="playlist-metadata">
diff --git a/yt_search_results_template.html b/yt_search_results_template.html
index 147c437..3909898 100644
--- a/yt_search_results_template.html
+++ b/yt_search_results_template.html
@@ -11,18 +11,8 @@
             }
 
             header{
-                display:grid;
                 grid-template-columns: 3fr 1fr;
             }
-                #header-left{
-                    grid-column:1;
-                    
-                    display:grid;
-                    grid-template-columns: 1fr 800px;
-                }
-                    #site-search{
-                        grid-column: 2;
-                    }
                 
             #left{
                 grid-column: 1;
@@ -63,14 +53,7 @@
         </style>
     </head>
     <body>
-        <header>
-            <div id="header-left">
-                <form id="site-search" action="/youtube.com/search">
-                    <input type="search" name="query" class="search-box" value="$search_box_value">
-                    <button type="submit" value="Search" class="search-button">Search</button>
-                </form>
-            </div>
-        </header>
+$header
         <main>
             <div id="left">
                 <div id="result-info">
diff --git a/yt_search_template.html b/yt_search_template.html
index 375a6f2..f6d6906 100644
--- a/yt_search_template.html
+++ b/yt_search_template.html
@@ -24,9 +24,6 @@
                 margin:0;
             }
             #header{
-                background-color:#333333;
-                
-                display: grid;
                 grid-column: 1 / span 3;
                 grid-row: 1;
                 
@@ -39,33 +36,7 @@
                     grid-template-columns: 1fr 800px;
                 
                 }
-                    #search-form{
-                        grid-column: 2;
-                        
-                        display: grid;
-                        grid-template-columns: 1fr 0fr;
 
-                    }
-                    
-                        #search-box{
-                            grid-column: 1;
-                            align-self:center;
-                            height:25px;
-                            padding:0;
-                            margin:0;
-                            border:0;
-                            
-                        }
-                        #search-button{
-                            grid-column: 2;
-                            align-self:center;
-                            height:25px;
-                            
-                            padding-top:0;
-                            padding-bottom:0;
-                            border-style:solid;
-                            border-width:1px;
-                        }
                 
             #left{
                 grid-column: 1;
diff --git a/yt_watch_template.html b/yt_watch_template.html
index c5bac0a..f4de269 100644
--- a/yt_watch_template.html
+++ b/yt_watch_template.html
@@ -11,44 +11,6 @@
                 grid-template-columns: 3fr 2fr;
             }
 
-            header{
-                display:grid;
-                grid-template-columns: 3fr 2fr;
-            }
-                #header-left{
-                    grid-column:1;
-                    
-                    display:grid;
-                    grid-template-columns: 1fr 640px;
-                }
-                    #site-search{
-                        grid-column: 2;
-                    }
-                #header-right{
-                    grid-column:2;
-                    
-                    display:grid;
-                    grid-template-columns:40px 400px 100px 1fr;
-                    grid-template-rows: 1fr 1fr;
-                }
-                    #playlist-add{
-                        display:contents;
-                    }
-                        #playlist-name-selection{
-                            grid-column:2;
-                            grid-row:1;
-                            justify-self:start;
-                        }
-                        #playlist-add-button{
-                            grid-column:2;
-                            grid-row:2;
-                            justify-self:start;
-                        }
-                        #item-selection-reset{
-                            grid-column:3;
-                            grid-row:2;
-                            justify-self:center;
-                        }
             #left{
                 background-color:#bcbcbc;
                 
@@ -88,24 +50,7 @@
         </style>
     </head>
     <body>
-        <header>
-            <div id="header-left">
-                <form id="site-search" action="/youtube.com/search">
-                    <input type="search" name="query" class="search-box">
-                    <button type="submit" value="Search" class="search-button">Search</button>
-                </form>
-            </div>
-            <div id="header-right">
-                <form id="playlist-add" action="/youtube.com/edit_playlist" method="post" target="_self">
-                    <input type="hidden" name="action" value="add">
-                    <select name="playlist_name" id="playlist-name-selection">
-                        <option value="watch_later">watch_later</option>
-                    </select>
-                    <button type="submit" id="playlist-add-button">Add to playlist</button>
-                    <button type="reset" id="item-selection-reset">Clear selection</button>
-                </form>
-            </div>
-        </header>
+$header
         <main>
             <div id="left">
                 <article class="full-item">