allowing to subscribe to multiple channels at once

tubearchivist/home/src/helper.py

@@ -46,7 +46,7 @@ def process_url_list(url_str):
     url_list = re.split('\n+', url_str[0])
     youtube_ids = []
     for url in url_list:
-        url_clean = url.strip().split('/')[-1]
+        url_clean = url.strip().strip('/').split('/')[-1]
         for i in to_replace:
             url_clean = url_clean.replace(i, '')
         url_no_param = url_clean.split('&')[0]

tubearchivist/home/templates/home/channel.html

@@ -5,26 +5,29 @@
 <div class="title-bar">
     <h1>Channels</h1>
 </div>
-<div class="two-col">
+<div class="info-box info-box-2">
-    <div>
+    <div class="icon-text">
-        <h2>Subscribe to channel</h2>
+        <img id="add-icon" onclick="showForm()" src="{% static 'img/icon-add.svg' %}" alt="add-icon">
-        <p>Input channel ID, channel URL or Video of a channel</p>
+        <p>Subscribe to Channels</p>
-        <form action="/channel/" method="post">
+        <div class="show-form">
+            <form id="hidden-form" action="/channel/" method="post">
                 {% csrf_token %}
-            <input type="text" id="subscribe" name="subscribe" autocomplete="off">
+                <textarea rows="3" placeholder="Input channel ID, channel URL or Video of a channel" id="subscribe" name="subscribe"></textarea>
                 <button type="submit">Subscribe</button>
             </form>
         </div>
-    <div class="search-form">
+    </div>
+    <div class="search-form icon-text">
+        <div class="search-icon">
+            <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
+            <p>Search Channels</p>
+        </div>
         <form onSubmit="return channelRedirect();" id="search-box">
             {% csrf_token %}
             <input name="videoSearch" list="resultBox" type="text" id="searchInput" autocomplete="off" oninput="searchChannels(this.value)">
             <datalist id="resultBox">
             </datalist>
         </form>
-        <div class="search-icon">
-            <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
-        </div>
     </div>
 </div>
 <div class="padding-box">

tubearchivist/home/templates/home/home.html

@@ -4,33 +4,31 @@
 <div class="title-bar">
     <h1>Recent Videos</h1>
 </div>
-<div class="two-col">
+<div class="info-box info-box-2">
     <div class="sort">
-        <div>
         <p>Sort order from <span class="settings-current">{{ sortorder }}</span>
             <select name="sort" id="sort" onchange="sortChange(this.value)">
                 <option value="" disabled selected> -- change sort order -- </option>
                 <option value="published">date published</option>
                 <option value="downloaded">date downloaded</option>
-            </select></p>
+            </select>
-        </div>
+        </p>
-        <div>
         <p>Hide watched videos <span class="settings-current">{{ hide_watched }}</span>
             <select name="watched" id="watched" onchange="hideWatched(this.value)">
                 <option value="" disabled selected> -- change hide watched -- </option>
                 <option value="0">show watched videos</option>
                 <option value="1">hide watched videos</option>
-            </select></p>
+            </select>
+        </p>
     </div>
+    <div class="search-form icon-text">
+        <div class="search-icon">
+            <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
         </div>
-    <div class="search-form">
         <form action="/" method="POST" id="search-box">
             {% csrf_token %}
             <input name="videoSearch" list="resultBox" type="text" id="searchInput" autocomplete="off">
         </form>
-        <div class="search-icon">
-            <img src="{% static 'img/icon-search.svg' %}" alt="search-icon" onclick="showSearch()">
-        </div>
     </div>
 </div>
 <div id="player" class="video-player"></div>

tubearchivist/home/views.py

@@ -314,28 +314,41 @@ class ChannelView(View):
         colors = config['application']['colors']
         return es_url, colors
 
-    @staticmethod
+    def post(self, request):
-    def post(request):
         """ handle http post requests """
         subscriptions_post = dict(request.POST)
         print(subscriptions_post)
         subscriptions_post = dict(request.POST)
         if 'subscribe' in subscriptions_post.keys():
-            youtube_ids = process_url_list(subscriptions_post['subscribe'])
+            sub_str = subscriptions_post['subscribe']
-            if youtube_ids[0]['type'] == 'video':
+            try:
-                youtube_id = youtube_ids[0]['url']
+                youtube_ids = process_url_list(sub_str)
-                vid_details = PendingList().get_youtube_details(youtube_id)
+                self.subscribe_to(youtube_ids)
+            except ValueError:
+                print('parsing subscribe ids failed!')
+                print(sub_str)
+
+        sleep(1)
+        return redirect('channel', permanent=True)
+
+    @staticmethod
+    def subscribe_to(youtube_ids):
+        """ process the subscribe ids """
+        for youtube_id in youtube_ids:
+            if youtube_id['type'] == 'video':
+                to_sub = youtube_id['url']
+                vid_details = PendingList().get_youtube_details(to_sub)
                 channel_id_sub = vid_details['channel_id']
+            elif youtube_id['type'] == 'channel':
+                channel_id_sub = youtube_id['url']
             else:
-                channel_id_sub = youtube_ids[0]['url']
+                raise ValueError('failed to subscribe to: ' + youtube_id)
+
             ChannelSubscription().change_subscribe(
                 channel_id_sub, channel_subscribed=True
             )
             print('subscribed to: ' + channel_id_sub)
 
-        sleep(1)
-        return redirect('channel', permanent=True)
-
 
 class VideoView(View):
     """ resolves to /video/<video-id>/

tubearchivist/static/css/style.css

@@ -182,11 +182,7 @@ button:hover {
 .sort {
     display: flex;
     flex-wrap: wrap;
-}
+    align-content: center;
-
-.sort > div {
-    width: 100%;
-    display: inline;
 }
 
 .padding-box {
@@ -201,13 +197,6 @@ button:hover {
     width: 50%;
 }
 
-.search-form {
-    display: flex;
-    flex-wrap: wrap;
-    align-items: center;
-    justify-content: flex-end;
-}
-
 .search-form input {
     width: 90%;
 }
@@ -615,9 +604,6 @@ button:hover {
     .sort {
         display: block;
     }
-    .sort > div {
-        display: block;
-    }
     .sort select {
         width: 100%;
         margin: unset;