options for sorting when searching

This commit is contained in:
James Taylor 2018-07-25 22:43:55 -07:00
parent 74c9647072
commit 182a2f3bdb
4 changed files with 101 additions and 42 deletions

View File

@ -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">

View File

@ -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)

View File

@ -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;
}

View File

@ -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>