Improve youtube search

Adds pagination, sort modes, etc

app/forms.py

@@ -15,7 +15,7 @@ class SearchForm(FlaskForm):
     submit = SubmitField('Search')
 
 class ChannelForm(FlaskForm):
-    channelId = StringField('')
+    search = StringField('')
     submit = SubmitField('Search')
 
 

app/routes.py

@@ -267,26 +267,41 @@ def ytfollowing():
     
     return render_template('ytfollowing.html', form=form, channelList=channelList, channelCount=channelCount, config=config)
 
+
 @app.route('/ytsearch', methods=['GET', 'POST'])
 @login_required
 def ytsearch():
     form = ChannelForm()
     button_form = EmptyForm()
-    if form.validate_on_submit():
-        searchTerms = form.channelId.data
-        page = 1
-        autocorrect = 1
+    query = request.args.get('q', None)
+    sort = request.args.get('s', None)
+    if sort != None:
+        sort = int(sort)
+    else:
         sort = 0
+
+    page = request.args.get('p', None)
+    if page == None:
+        page = 1
+
+    if query:
+        autocorrect = 1
         filters = {"time":0, "type":0, "duration":0}
-        results = yts.search_by_terms(searchTerms, page, autocorrect, sort, filters)
+        results = yts.search_by_terms(query, page, autocorrect, sort, filters)
+
+        next_page = "/ytsearch?q={q}&s={s}&p={p}".format(q=query, s=sort, p=int(page)+1)
+        if int(page) == 1:
+            prev_page = "/ytsearch?q={q}&s={s}&p={p}".format(q=query, s=sort, p=1)
+        else:
+            prev_page = "/ytsearch?q={q}&s={s}&p={p}".format(q=query, s=sort, p=int(page)-1)
+
         for channel in results['channels']:
             if config['nginxVideoStream']:
                 channel['thumbnail'] = channel['thumbnail'].replace("~", "/")
                 hostName = urllib.parse.urlparse(channel['thumbnail']).netloc
                 channel['thumbnail'] = channel['thumbnail'].replace("https://{}".format(hostName), "")+"?host="+hostName
                 print(channel['thumbnail'])
-        return render_template('ytsearch.html', form=form, btform=button_form, results=results, restricted=config['restrictPublicUsage'], config=config)
-
+        return render_template('ytsearch.html', form=form, btform=button_form, results=results, restricted=config['restrictPublicUsage'], config=config, npage=next_page, ppage=prev_page)
     else:
         return render_template('ytsearch.html', form=form, results=False)
 

app/templates/ytsearch.html

@@ -1,24 +1,25 @@
 {% extends "base.html" %}
 
 {% block content %}
-<div class="ui text container">
-    <form class="ui form" action="" method="post" novalidate>
-        {{ form.hidden_tag() }}
-        <p>
-            {{ form.channelId.label }}<br>
-            {{ form.channelId(size=32) }}<br>
-            {% for error in form.channelId.errors %}
-            <span style="color: red;">[{{ error }}]</span>
-            {% endfor %}
-        </p>
-        <p>{{ form.submit() }}</p>
+<div class="ui center aligned text container">
+    <form action="{{url_for('ytsearch', _method='GET')}}">
+    <div class="ui search">
+            <input class="prompt" name="q" type="text" placeholder="Search...">
+            <select name="s" id="sort">
+                <option value="0">Relevance</option>
+                <option value="3">Views</option>
+                <option value="2">Date</option>
+                <option value="1">Rating</option>
+            </select>
+        </div>
     </form>
 
     {% if results %}
-    <h3 class="ui dividing header">Users</h3>
-            <div class="ui relaxed divided list">
-
-                    {% for res in results.channels %}
+    {% if results.channels %}
+        <h3 class="ui dividing header">Users</h3>
+    {% endif %}
+    <div class="ui relaxed divided list">        
+            {% for res in results.channels %}
                     <div class="item">
                         <div class="image">
                             {% if config.nginxVideoStream %}
@@ -77,6 +78,19 @@
                     </div>
                 {% endif %}
             </div>
+
+    {%if ppage%}
+    <div class="ui text container center aligned">
+       <a href="{{ppage}}"><button class="ui labeled icon button">
+            <i class="left arrow icon"></i>
+            Prev
+        </button></a>
+        <a href="{{npage}}"><button class="ui right labeled icon button">
+            <i class="right arrow icon"></i>
+            Next
+        </button></a>
+    </div>
+    {%endif%}
 </div>
 
 {% endblock %}