Implement support for DeArrow.

src/components/FeedPage.vue

@@ -137,8 +137,20 @@ export default {
         },
         loadMoreVideos() {
             this.currentVideoCount = Math.min(this.currentVideoCount + this.videoStep, this.videosStore.length);
-            if (this.videos.length != this.videosStore.length)
+            if (this.videos.length != this.videosStore.length) {
+                const videoIds = this.videosStore
+                    .slice(this.videos.length, this.currentVideoCount)
+                    .map(video => video.url.substr(-11))
+                    .sort();
+                if (this.getPreferenceBoolean("dearrow", false))
+                    this.fetchDeArrowContent(videoIds).then(json => {
+                        Object.keys(json).forEach(key => {
+                            const video = this.videosStore.find(video => video.url.substr(-11) == key);
+                            video.dearrow = json[key];
+                        });
+                    });
                 this.videos = this.videosStore.slice(0, this.currentVideoCount);
+            }
         },
         handleScroll() {
             if (window.innerHeight + window.scrollY >= document.body.offsetHeight - window.innerHeight) {
@@ -158,6 +170,11 @@ export default {
         onFilterChange() {
             this.setPreference("feedFilter", this.selectedFilter);
         },
+        fetchDeArrowContent(videoIds) {
+            return this.fetchJson(this.apiUrl() + "/dearrow", {
+                videoIds: videoIds.join(","),
+            });
+        },
     },
 };
 </script>

src/components/PreferencesPage.vue

@@ -252,6 +252,16 @@
             />
         </label>
     </div>
+
+    <h2 class="text-center" v-t="'titles.dearrow'" />
+    <p class="text-center">
+        <span v-t="'actions.uses_api_from'" /><a class="link" href="https://sponsor.ajay.app/">sponsor.ajay.app</a>
+    </p>
+    <label class="pref" for="chkDeArrow">
+        <strong v-t="'actions.enable_dearrow'" />
+        <input id="chkDeArrow" v-model="dearrow" class="checkbox" type="checkbox" @change="onChange($event)" />
+    </label>
+
     <h2 class="text-center" v-t="'titles.instance'" />
     <label class="pref" for="ddlInstanceSelection">
         <strong v-text="`${$t('actions.instance_selection')}:`" />
@@ -391,6 +401,7 @@ export default {
             ]),
             showMarkers: true,
             minSegmentLength: 0,
+            dearrow: false,
             selectedTheme: "dark",
             autoPlayVideo: true,
             autoDisplayCaptions: false,
@@ -511,6 +522,7 @@ export default {
 
             this.showMarkers = this.getPreferenceBoolean("showMarkers", true);
             this.minSegmentLength = Math.max(this.getPreferenceNumber("minSegmentLength", 0), 0);
+            this.dearrow = this.getPreferenceBoolean("dearrow", false);
             this.selectedTheme = this.getPreferenceString("theme", "dark");
             this.autoPlayVideo = this.getPreferenceBoolean("playerAutoPlay", true);
             this.autoDisplayCaptions = this.getPreferenceBoolean("autoDisplayCaptions", false);
@@ -569,6 +581,9 @@ export default {
 
                 localStorage.setItem("showMarkers", this.showMarkers);
                 localStorage.setItem("minSegmentLength", this.minSegmentLength);
+
+                localStorage.setItem("dearrow", this.dearrow);
+
                 localStorage.setItem("theme", this.selectedTheme);
                 localStorage.setItem("playerAutoPlay", this.autoPlayVideo);
                 localStorage.setItem("autoDisplayCaptions", this.autoDisplayCaptions);

src/components/VideoItem.vue

@@ -14,8 +14,8 @@
             <div class="w-full">
                 <img
                     class="w-full aspect-video object-contain"
-                    :src="item.thumbnail"
+                    :src="thumbnail"
-                    :alt="item.title"
+                    :alt="title"
                     :class="{ 'shorts-img': item.isShort, 'opacity-75': item.watched }"
                     loading="lazy"
                 />
@@ -52,8 +52,8 @@
                 <p
                     style="display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical"
                     class="pt-2 overflow-hidden flex link font-bold"
-                    :title="item.title"
+                    :title="title"
-                    v-text="item.title"
+                    v-text="title"
                 />
             </div>
         </router-link>
@@ -102,8 +102,8 @@
                             listen: '1',
                         },
                     }"
-                    :aria-label="'Listen to ' + item.title"
+                    :aria-label="'Listen to ' + title"
-                    :title="'Listen to ' + item.title"
+                    :title="'Listen to ' + title"
                 >
                     <font-awesome-icon icon="headphones" />
                 </router-link>
@@ -174,6 +174,14 @@ export default {
     mounted() {
         this.shouldShowVideo();
     },
+    computed: {
+        title() {
+            return this.item.dearrow?.titles[0]?.title ?? this.item.title;
+        },
+        thumbnail() {
+            return this.item.dearrow?.thumbnails[0]?.thumbnail ?? this.item.thumbnail;
+        },
+    },
     methods: {
         removeVideo() {
             this.$refs.removeButton.disabled = true;

src/locales/en.json

@@ -14,7 +14,8 @@
         "livestreams": "Livestreams",
         "channels": "Channels",
         "bookmarks": "Bookmarks",
-        "channel_groups": "Channel groups"
+        "channel_groups": "Channel groups",
+        "dearrow": "DeArrow"
     },
     "player": {
         "watch_on": "Watch on {0}"
@@ -45,6 +46,7 @@
         "show_markers": "Show Markers on Player",
         "min_segment_length": "Minimum Segment Length (in seconds)",
         "skip_segment": "Skip Segment",
+        "enable_dearrow": "Enable DeArrow",
         "theme": "Theme",
         "auto": "Auto",
         "dark": "Dark",