✨ Update video player features

.env

@@ -1,14 +1,3 @@
-VIEWTUBE_DATABASE_HOST=localhost
-VIEWTUBE_DATABASE_USER=
-VIEWTUBE_DATABASE_PASSWORD=
-VIEWTUBE_REDIS_HOST=localhost
-VIEWTUBE_REDIS_PORT=6379
-VIEWTUBE_REDIS_PASSWORD=
 VIEWTUBE_JWT_SECRET=my_secret_token
-VIEWTUBE_JWT_EXPIRATION_TIME=43200
-VIEWTUBE_ALLOWED_DOMAINS=http://viewtube.io,http://viewtube.eu
-VIEWTUBE_YOUTUBE_COOKIE=
-VIEWTUBE_YOUTUBE_IDENTIFIER=
 VIEWTUBE_PUBLIC_VAPID=BGVr0ZXSAkSL3JGl8IDylvLaD9B_cisWqESJ3_mrBOk0xZ1axMNbIYF5DF1IWi2Htuzj3Hu34WfNwBx210fkmHE
 VIEWTUBE_PRIVATE_VAPID=629GTJP01gFlDcyI8pypK2wkUYt_B1HgE_vQuiSI1uQ
-PORT=8066

client/components/Comment.vue

@@ -65,7 +65,7 @@
             />
           </div>
           <BadgeButton
-            v-if="!loadingReplies && repliesContinuationLink"
+            v-if="!loadingReplies && repliesContinuationString"
             class="show-more-replies"
             :click="loadMoreReplies"
             :loading="repliesContinuationLoading"
@@ -88,7 +88,6 @@ import CommentHideIcon from 'vue-material-design-icons/CommentRemoveOutline.vue'
 import LoadMoreIcon from 'vue-material-design-icons/Reload.vue';
 import { defineComponent, ref, useRoute } from '@nuxtjs/composition-api';
 import BadgeButton from '@/components/buttons/BadgeButton.vue';
-import Invidious from '@/plugins/services/invidious';
 import { useAccessor } from '@/store';
 import { useAxios } from '@/plugins/axiosPlugin';
 import { useImgProxy } from '@/plugins/proxy';
@@ -119,7 +118,7 @@ export default defineComponent({
     const replies = ref([]);
     const loadingReplies = ref(false);
     const repliesLoaded = ref(false);
-    const repliesContinuationLink = ref(null);
+    const repliesContinuationString = ref(null);
     const repliesContinuationLoading = ref(false);
 
     const hideReplies = () => {
@@ -133,7 +132,7 @@ export default defineComponent({
         .get(`${accessor.environment.apiUrl}comments/${videoId}/replies?replyToken=${replyToken}`)
         .then(response => {
           replies.value = response.data.comments;
-          repliesContinuationLink.value = response.data.continuation || null;
+          repliesContinuationString.value = response.data.continuation || null;
           repliesLoaded.value = true;
           loadingReplies.value = false;
         })
@@ -149,17 +148,11 @@ export default defineComponent({
     const loadMoreReplies = () => {
       repliesContinuationLoading.value = true;
       const videoId = route.value.query.v;
-      const invidious = new Invidious(accessor.instances.currentInstanceApi);
-      invidious.api
-        .comments({
-          id: videoId,
-          params: {
-            continuation: repliesContinuationLink
-          }
-        })
+      axios
+        .get(`${accessor.environment.apiUrl}comments/${videoId}/replies?replyToken=${repliesContinuationString.value}`)
         .then(response => {
           replies.value = replies.value.concat(response.data.comments);
-          repliesContinuationLink.value = response.data.continuation || null;
+          repliesContinuationString.value = response.data.continuation || null;
           repliesContinuationLoading.value = false;
         })
         .catch(error => {
@@ -176,7 +169,7 @@ export default defineComponent({
       replies,
       loadingReplies,
       repliesLoaded,
-      repliesContinuationLink,
+      repliesContinuationString,
       repliesContinuationLoading,
       hideReplies,
       loadReplies,

client/components/Instances.vue

@@ -24,7 +24,7 @@
 import CloseIcon from 'vue-material-design-icons/Close.vue';
 import InstanceIcon from 'vue-material-design-icons/ServerNetwork.vue';
 import '@/assets/styles/popup.scss';
-import { computed, defineComponent } from '@nuxtjs/composition-api';
+import { computed, defineComponent, onMounted } from '@nuxtjs/composition-api';
 import InstanceEntry from '@/components/list/InstanceEntry.vue';
 import { useAccessor } from '@/store';
 
@@ -45,6 +45,18 @@ export default defineComponent({
       accessor.instances.changeInstance(element.value);
     };
 
+    onMounted(() => {
+      const oneDay = 60 * 60 * 24 * 1000;
+      let tooOld = false;
+      if (accessor.instances.refreshDate) {
+        const refreshDate = new Date(accessor.instances.refreshDate);
+        tooOld = Date.now() - refreshDate.getTime() > oneDay;
+      }
+      if (accessor.instances.instances.length === 0 || tooOld) {
+        accessor.instances.fetchInstances();
+      }
+    });
+
     return {
       instances,
       currentInstance,

client/components/Settings.vue

@@ -32,7 +32,6 @@
         :value="$accessor.settings.chapters"
         :label="'Show chapters on a video'"
         :disabled="false"
-        :btnId="'settings-btn-1'"
         :right="true"
         @valuechange="val => saveSetting('settings/setChapters', val)"
       />
@@ -41,7 +40,6 @@
         :value="$accessor.settings.saveVideoHistory"
         :label="'Save video history and progress'"
         :disabled="false"
-        :btnId="'settings-btn-2'"
         :right="true"
         @valuechange="val => saveSetting('settings/setSaveVideoHistory', val)"
       />
@@ -62,7 +60,6 @@
         :value="$accessor.settings.sponsorblockEnabled"
         :label="'Enable SponsorBlock'"
         :disabled="false"
-        :btnId="'settings-btn-2'"
         :right="true"
         @valuechange="val => saveSetting('settings/setSponsorblock', val)"
       />
@@ -125,18 +122,96 @@
             :color-mark="'#f89c06'"
             @valuechange="val => onSponsorblockOptionChange('MusicOfftopic', val)"
           />
+          <MultiOptionButton
+            :options="sponsorblockSegmentOptions"
+            :selectedValue="$accessor.settings.sponsorblockSegmentPreview"
+            :label="'Preview'"
+            :small-label="'Skips previews and recaps'"
+            :right="true"
+            :color-mark="'#f70000'"
+            @valuechange="val => onSponsorblockOptionChange('Preview', val)"
+          />
         </div>
       </div>
 
       <h2><MiniplayerIcon />Miniplayer</h2>
       <SwitchButton
         :value="$accessor.settings.miniplayer"
         :label="'Enable miniplayer'"
-        :disabled="false"
-        :btnId="'settings-btn-3'"
+        :small-label="'Not working at the moment'"
+        :disabled="true"
         :right="true"
         @valuechange="val => saveSetting('settings/setMiniplayer', val)"
       />
+
+      <h2><HomescreenIcon />Homescreen</h2>
+      <SwitchButton
+        :value="$accessor.settings.showHomeSubscriptions"
+        :label="'Show subscriptions on home screen'"
+        :small-label="'Subscriptions require signing in'"
+        :disabled="false"
+        :right="true"
+        @valuechange="val => saveSetting('settings/setShowHomeSubscriptions', val)"
+      />
+
+      <h2><VideoplayerIcon />Videoplayer</h2>
+      <div class="settings-dropdown-menu">
+        <div class="quality-label">
+          <label>Default video quality</label>
+          <label class="small-label">If unavailable, the next lower quality will be chosen</label>
+        </div>
+        <Dropdown
+          :values="videoQualities"
+          :value="$accessor.settings.defaultVideoQuality"
+          @valuechange="val => saveSetting('settings/setDefaultVideoQuality', val.value)"
+        />
+      </div>
+      <SwitchButton
+        :value="$accessor.settings.autoplay"
+        :label="'Autoplay video'"
+        :small-label="'Automatically plays video after opening'"
+        :disabled="false"
+        :right="true"
+        @valuechange="val => saveSetting('settings/setAutoplay', val)"
+      />
+      <SwitchButton
+        :value="$accessor.settings.autoplayNextVideo"
+        :label="'Autoplay next video'"
+        :small-label="'Automatically plays the next recommended video'"
+        :disabled="false"
+        :right="true"
+        @valuechange="val => saveSetting('settings/setAutoplayNextVideo', val)"
+      />
+      <SwitchButton
+        :value="$accessor.settings.alwaysLoopVideo"
+        :label="'Loop video'"
+        :small-label="'Overrides playing next video with autoplay or in playlists'"
+        :disabled="false"
+        :right="true"
+        @valuechange="val => saveSetting('settings/setAlwaysLoopVideo', val)"
+      />
+      <SwitchButton
+        :value="$accessor.settings.audioModeDefault"
+        :label="'Audio mode default'"
+        :small-label="'Not implemented yet'"
+        :disabled="true"
+        :right="true"
+        @valuechange="val => saveSetting('settings/setAudioModeDefault', val)"
+      />
+      <div class="settings-number-menu">
+        <label for="video-speed-input">Default video speed</label>
+        <input
+          id="video-speed-input"
+          class="settings-number-input"
+          type="number"
+          name="video-speed"
+          :value="$accessor.settings.defaultVideoSpeed"
+          step="0.1"
+          max="3"
+          min="0.1"
+          @change="val => saveSetting('settings/setDefaultVideoSpeed', val.target.value)"
+        />
+      </div>
     </div>
     <div class="settings-overlay popup-overlay" @click.stop="$emit('close')" />
   </div>
@@ -150,10 +225,13 @@ import ChaptersIcon from 'vue-material-design-icons/BookOpenVariant.vue';
 import CloudCheckIcon from 'vue-material-design-icons/CloudCheckOutline.vue';
 import HistoryIcon from 'vue-material-design-icons/History.vue';
 import ReloadIcon from 'vue-material-design-icons/Reload.vue';
+import HomescreenIcon from 'vue-material-design-icons/Home.vue';
+import VideoplayerIcon from 'vue-material-design-icons/Television.vue';
 import { computed, defineComponent, reactive, ref, useStore, watch } from '@nuxtjs/composition-api';
 import ThemeSelector from '@/components/themes/ThemeSelector.vue';
 import SwitchButton from '@/components/buttons/SwitchButton.vue';
 import MultiOptionButton from '@/components/buttons/MultiOptionButton.vue';
+import Dropdown from '@/components/filter/Dropdown.vue';
 import '@/assets/styles/popup.scss';
 import { useAccessor } from '@/store';
 
@@ -164,12 +242,15 @@ export default defineComponent({
     ThemeIcon,
     MiniplayerIcon,
     HistoryIcon,
+    HomescreenIcon,
+    VideoplayerIcon,
     SwitchButton,
     ThemeSelector,
     ChaptersIcon,
     MultiOptionButton,
     CloudCheckIcon,
-    ReloadIcon
+    ReloadIcon,
+    Dropdown
   },
   setup() {
     const accessor = useAccessor();
@@ -180,6 +261,8 @@ export default defineComponent({
       { label: 'None', value: 'none' }
     ]);
 
+    const videoQualities = ['144p', '240p', '360p', '720p', '1080p', '1440p', '2160p'];
+
     const settingsSaving = ref(false);
     const themes = computed(() => accessor.settings.defaultThemes);
     const currentTheme = computed(() => accessor.settings.theme);
@@ -224,7 +307,8 @@ export default defineComponent({
       settingsSaving,
       onSponsorblockOptionChange,
       onThemeChange,
-      saveSetting
+      saveSetting,
+      videoQualities
     };
   }
 });
@@ -306,9 +390,51 @@ export default defineComponent({
     }
   }
 
+  .settings-dropdown-menu {
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 36px);
+    justify-content: space-between;
+
+    .quality-label {
+      display: flex;
+      flex-direction: column;
+
+      .small-label {
+        margin: 0 !important;
+      }
+    }
+
+    label {
+      margin-top: 20px !important;
+      height: 100%;
+    }
+  }
+
+  .settings-number-menu {
+    display: flex;
+    flex-direction: row;
+    width: calc(100% - 36px);
+    justify-content: space-between;
+    margin-top: 20px !important;
+
+    .settings-number-input {
+      all: unset;
+      border: 2px solid var(--bgcolor-alt-light);
+      width: 50px;
+      padding: 2px 5px;
+      border-radius: 5px;
+      transition: border 300ms $intro-easing;
+
+      &:focus {
+        border: 2px solid var(--theme-color);
+      }
+    }
+  }
+
   .sponsorblock-options-container {
     width: calc(100% - 36px);
-    
+
     .sponsorblock-options {
       // width: calc(100% - 20px);
       transition: padding 300ms $intro-easing;