options for sorting when searching

4 files changed, 101 insertions, 42 deletions

diff --git a/youtube/common.py b/youtube/common.py
index 5af33a0..41b5f63 100644
--- a/youtube/common.py
+++ b/youtube/common.py
@@ -295,6 +295,25 @@ header_template = Template('''
                 <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>
+                    <div class="dropdown">
+                        <button class="dropdown-label">Options</button>
+                        <div class="css-sucks">
+                            <div class="dropdown-content">
+                                <h3>Sort by</h3>
+                                <input type="radio" id="sort_relevance" name="sort" value="0">
+                                <label for="sort_relevance">Relevance</label>
+
+                                <input type="radio" id="sort_upload_date" name="sort" value="2">
+                                <label for="sort_upload_date">Upload date</label>
+
+                                <input type="radio" id="sort_view_count" name="sort" value="3">
+                                <label for="sort_view_count">View count</label>
+
+                                <input type="radio" id="sort_rating" name="sort" value="1">
+                                <label for="sort_rating">Rating</label>
+                            </div>
+                        </div>
+                    </div>
                 </form>
             </div>
             <div id="header-right">
diff --git a/youtube/search.py b/youtube/search.py
index 2307656..0f77595 100644
--- a/youtube/search.py
+++ b/youtube/search.py
@@ -20,6 +20,7 @@ current_page_button_template = Template('''<div class="page-button">$page</div>'
     # Upload date: 2
     # View count: 3
     # Rating: 1
+    # Relevance: 0
 # Offset: 9
 # Filters: 2
     # Upload date: 1
@@ -40,12 +41,13 @@ features = {
     'location': 23,
 }
 
-def page_number_to_sp_parameter(page, autocorrect=1):
+def page_number_to_sp_parameter(page, autocorrect=1, sort = 0):
     offset = (int(page) - 1)*20    # 20 results per page
     autocorrect = proto.nested(8, proto.uint(1, 1 - int(autocorrect) ))
-    return base64.urlsafe_b64encode(proto.uint(9, offset) + proto.string(61, b'') + autocorrect).decode('ascii')
+    result = proto.uint(1, sort) + proto.uint(9, offset) + proto.string(61, b'') + autocorrect
+    return base64.urlsafe_b64encode(result).decode('ascii')
 
-def get_search_json(query, page, autocorrect):
+def get_search_json(query, page, autocorrect, sort):
     url = "https://www.youtube.com/results?search_query=" + urllib.parse.quote_plus(query)
     headers = {
         'Host': 'www.youtube.com',
@@ -55,7 +57,7 @@ def get_search_json(query, page, autocorrect):
         'X-YouTube-Client-Name': '1',
         'X-YouTube-Client-Version': '2.20180418',
     }
-    url += "&pbj=1&sp=" + page_number_to_sp_parameter(page, autocorrect)
+    url += "&pbj=1&sp=" + page_number_to_sp_parameter(page, autocorrect, sort)
     content = common.fetch_url(url, headers=headers)
     info = json.loads(content)
     return info
@@ -84,9 +86,9 @@ def get_search_page(query_string, parameters=()):
         return yt_search_template
     query = qs_query["query"][0]
     page = qs_query.get("page", "1")[0]
-    autocorrect = qs_query.get("autocorrect", "1")[0]
-
-    info = get_search_json(query, page, autocorrect)
+    autocorrect = int(qs_query.get("autocorrect", "1")[0])
+    sort = int(qs_query.get("sort", "0")[0])
+    info = get_search_json(query, page, autocorrect, sort)
     
     estimated_results = int(info[1]['response']['estimatedResults'])
     estimated_pages = ceil(estimated_results/20)
diff --git a/youtube/shared.css b/youtube/shared.css
index b9d25ec..fc8084d 100644
--- a/youtube/shared.css
+++ b/youtube/shared.css
@@ -46,7 +46,7 @@ address{
     #site-search{
         grid-column: 2;
         display: grid;
-        grid-template-columns: 1fr 0fr;
+        grid-template-columns: 1fr auto auto;
 
     }
 
@@ -65,7 +65,46 @@ address{
             border-style:solid;
             border-width:1px;
         }
- 
+        #site-search .dropdown{
+            margin-left:5px;
+            grid-column: 3;
+            align-self:center;
+            height:25px;
+        }
+            #site-search .dropdown button{
+                align-self:center;
+                height:25px;
+
+                border-style:solid;
+                border-width:1px;
+            }
+            #site-search .css-sucks{
+                width:0px;
+                height:0px;
+            }
+                #site-search .dropdown-content{
+                    grid-template-columns: auto auto;
+                    white-space: nowrap;
+                }
+                    #site-search .dropdown-content h3{
+                        grid-column:1 / span 2;
+                    }
+
+.dropdown{
+    z-index:1;
+}
+    .dropdown-content{
+        display:none;
+        background-color: #e9e9e9;
+    }
+    .dropdown:hover .dropdown-content{
+        /* For some reason, if this is just grid, it will insist on being 0px wide just like its 0px by 0px parent */
+        /* making it inline-grid happened to fix it */
+        display:inline-grid;
+    }
+
+
+
 #header-right{
     grid-column:2;
     
@@ -387,33 +426,3 @@ address{
         font-weight: bold;
         text-align: center;
     }
-
-
-.dropdown{
-    z-index:1;
-    justify-self:start;
-    min-width:0px;
-}
-
-    .dropdown-label{
-        background-color: #e9e9e9;
-        border-style: outset;
-        border-width: 2px;
-        font-weight: bold;
-    }
-
-    .dropdown-content{
-        display:none;
-        background-color: #e9e9e9;
-    }
-    .dropdown:hover .dropdown-content {
-        display: grid;
-        grid-auto-rows:30px;
-        padding-bottom: 50px;
-    }
-        .dropdown-content a{
-            white-space: nowrap;
-            display:grid;
-            grid-template-columns: 60px 90px auto;
-            max-height: 1.2em;
-        }
\ No newline at end of file
diff --git a/yt_watch_template.html b/yt_watch_template.html
index f78f7e8..7d5f4ae 100644
--- a/yt_watch_template.html
+++ b/yt_watch_template.html
@@ -48,6 +48,35 @@
                     #related .medium-item{
                         grid-template-columns: 160px 1fr 0fr;
                     }
+
+            .download-dropdown{
+                z-index:1;
+                justify-self:start;
+                min-width: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;
+                    }
         </style>
     </head>
     <body>
@@ -68,9 +97,9 @@ $video_sources
 
                     <time datetime="$upload_date">Published on $upload_date</time>
                     <span class="likes-dislikes">$likes likes $dislikes dislikes</span>
-                    <div class="dropdown">
-                        <button class="dropdown-label">Download</button>
-                        <div class="dropdown-content">
+                    <div class="download-dropdown">
+                        <button class="download-dropdown-label">Download</button>
+                        <div class="download-dropdown-content">
 $download_options
                         </div>
                     </div>