implement watched-unwatched toggle, #39

tubearchivist/home/src/index.py

@@ -384,6 +384,16 @@ class WatchState:
 
         print(f"marked {self.youtube_id} as watched")
 
+    def mark_as_unwatched(self):
+        """revert watched state to false"""
+        url_type = self.dedect_type()
+        if url_type == "video":
+            self.mark_vid_watched(revert=True)
+        elif url_type == "channel":
+            self.mark_channel_watched(revert=True)
+
+        print(f"revert {self.youtube_id} as unwatched")
+
     def dedect_type(self):
         """find youtube id type"""
         url_process = process_url_list([self.youtube_id])
@@ -391,18 +401,21 @@ class WatchState:
 
         return url_type
 
-    def mark_vid_watched(self):
+    def mark_vid_watched(self, revert=False):
         """change watched status of single video"""
         url = self.ES_URL + "/ta_video/_update/" + self.youtube_id
         data = {
             "doc": {"player": {"watched": True, "watched_date": self.stamp}}
         }
+        if revert:
+            data["doc"]["player"]["watched"] = False
+
         payload = json.dumps(data)
         request = requests.post(url, data=payload, headers=self.HEADERS)
         if not request.ok:
             print(request.text)
 
-    def mark_channel_watched(self):
+    def mark_channel_watched(self, revert=False):
         """change watched status of every video in channel"""
         es_url = self.ES_URL
         headers = self.HEADERS
@@ -415,6 +428,9 @@ class WatchState:
                 {"set": {"field": "player.watched_date", "value": self.stamp}},
             ],
         }
+        if revert:
+            data["processors"][0]["set"]["value"] = False
+
         payload = json.dumps(data)
         url = f"{es_url}/_ingest/pipeline/{youtube_id}"
         request = requests.put(url, data=payload, headers=headers)

tubearchivist/home/templates/home/channel_id.html

@@ -84,7 +84,7 @@
                 <div class="video-desc {{ view_style }}">
                     <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
                         {% if video.source.player.watched %}
-                            <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon">
+                            <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
                         {% else %}
                             <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
                         {% endif %}

tubearchivist/home/templates/home/home.html

@@ -61,7 +61,7 @@
                 <div class="video-desc {{ view_style }}">
                     <div class="video-desc-player" id="video-info-{{ video.source.youtube_id }}">
                         {% if video.source.player.watched %}
-                            <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" class="seen-icon">
+                            <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.source.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
                         {% else %}
                             <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.source.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
                         {% endif %}

tubearchivist/home/templates/home/video.html

@@ -34,7 +34,7 @@
             <p>Last refreshed: {{ video.vid_last_refresh }}</p>
             <p class="video-info-watched">Watched:
                 {% if video.player.watched %}
-                    <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" class="seen-icon" id="{{ video.youtube_id }}">
+                    <img src="{% static 'img/icon-seen.svg' %}" alt="seen-icon" id="{{ video.youtube_id }}" onclick="isUnwatched(this.id)" class="seen-icon" title="Mark as unwatched">
                 {% else %}
                     <img src="{% static 'img/icon-unseen.svg' %}" alt="unseen-icon" id="{{ video.youtube_id }}" onclick="isWatched(this.id)" class="unseen-icon" title="Mark as watched.">
                 {% endif %}

tubearchivist/home/views.py

@@ -489,6 +489,7 @@ class PostData:
         """map dict key and return function to execute"""
         exec_map = {
             "watched": self.watched,
+            "un_watched": self.un_watched,
             "change_view": self.change_view,
             "rescan_pending": self.rescan_pending,
             "ignore": self.ignore,
@@ -515,6 +516,11 @@ class PostData:
         WatchState(self.exec_val).mark_as_watched()
         return {"success": True}
 
+    def un_watched(self):
+        """mark as unwatched"""
+        WatchState(self.exec_val).mark_as_unwatched()
+        return {"success": True}
+
     def change_view(self):
         """process view changes in home, channel, and downloads"""
         origin, new_view = self.exec_val.split(":")

tubearchivist/static/css/style.css

@@ -440,15 +440,12 @@ button:hover {
 }
 
 .unseen-icon,
+.seen-icon,
 .close-button {
     cursor: pointer;
     filter: var(--img-filter);
 }
 
-.seen-icon {
-    filter: var(--img-filter);
-}
-
 .video-more {
     text-decoration: underline;
     text-align: right;

tubearchivist/static/script.js

@@ -15,10 +15,25 @@ function isWatched(youtube_id) {
     seenIcon.setAttribute('src', "/static/img/icon-seen.svg");
     seenIcon.setAttribute('alt', 'seen-icon');
     seenIcon.setAttribute('id', youtube_id);
+    seenIcon.setAttribute('title', "Mark as unwatched");
+    seenIcon.setAttribute('onclick', "isUnwatched(this.id)");
     seenIcon.classList = 'seen-icon';
     document.getElementById(youtube_id).replaceWith(seenIcon);
 }
 
+function isUnwatched(youtube_id) {
+    var payload = JSON.stringify({'un_watched': youtube_id});
+    sendPost(payload);
+    var unseenIcon = document.createElement('img');
+    unseenIcon.setAttribute('src', "/static/img/icon-unseen.svg");
+    unseenIcon.setAttribute('alt', 'unseen-icon');
+    unseenIcon.setAttribute('id', youtube_id);
+    unseenIcon.setAttribute('title', "Mark as watched");
+    unseenIcon.setAttribute('onclick', "isWatched(this.id)");
+    unseenIcon.classList = 'unseen-icon';
+    document.getElementById(youtube_id).replaceWith(unseenIcon);
+}
+
 function unsubscribe(channel_id) {
     var payload = JSON.stringify({'unsubscribe': channel_id});
     sendPost(payload);