* Implement watch progress saving mode setting

Author: PikachuEXE

src/datastores/handlers/base.js

@@ -38,6 +38,16 @@ class Settings {
       await db.settings.removeAsync({ _id: 'defaultTheatreMode' })
     }
 
+    const saveWatchedProgress = await db.settings.findOneAsync({ _id: 'saveWatchedProgress' })
+    const watchedProgressSavingMode = await db.settings.findOneAsync({ _id: 'watchedProgressSavingMode' })
+    if (saveWatchedProgress && !watchedProgressSavingMode) {
+      if (!saveWatchedProgress.value) {
+        await this.upsert('watchedProgressSavingMode', 'never')
+      }
+
+      await db.settings.removeAsync({ _id: 'saveWatchedProgress' })
+    }
+
     return db.settings.findAsync({ _id: { $ne: 'bounds' } })
   }
 

src/renderer/components/ft-list-video/ft-list-video.js

@@ -128,7 +128,7 @@ export default defineComponent({
     },
 
     watchProgress: function () {
-      if (!this.historyEntryExists || !this.saveWatchedProgress) {
+      if (!this.historyEntryExists || !this.watchedProgressSavingEnabled) {
         return 0
       }
 
@@ -388,8 +388,11 @@ export default defineComponent({
       return this.$store.getters.getDefaultPlayback
     },
 
-    saveWatchedProgress: function () {
-      return this.$store.getters.getSaveWatchedProgress
+    watchedProgressSavingEnabled: function () {
+      return ['auto', 'semi-auto'].includes(this.$store.getters.getWatchedProgressSavingMode)
+    },
+    autosaveWatchedProgress: function () {
+      return this.$store.getters.getWatchedProgressSavingMode === 'auto'
     },
 
     saveVideoHistoryWithLastViewedPlaylist: function () {
@@ -639,7 +642,7 @@ export default defineComponent({
       }
       this.openInExternalPlayer(payload)
 
-      if (this.saveWatchedProgress && !this.historyEntryExists) {
+      if (this.autosaveWatchedProgress && !this.historyEntryExists) {
         this.markAsWatched()
       }
     },

src/renderer/components/privacy-settings/privacy-settings.js

@@ -5,6 +5,7 @@ import FtButton from '../ft-button/ft-button.vue'
 import FtToggleSwitch from '../ft-toggle-switch/ft-toggle-switch.vue'
 import FtFlexBox from '../ft-flex-box/ft-flex-box.vue'
 import FtPrompt from '../FtPrompt/FtPrompt.vue'
+import FtSelect from '../ft-select/ft-select.vue'
 import { MAIN_PROFILE_ID } from '../../../constants'
 import { showToast } from '../../helpers/utils'
 
@@ -15,7 +16,8 @@ export default defineComponent({
     'ft-button': FtButton,
     'ft-toggle-switch': FtToggleSwitch,
     'ft-flex-box': FtFlexBox,
-    'ft-prompt': FtPrompt
+    'ft-prompt': FtPrompt,
+    'ft-select': FtSelect,
   },
   data: function () {
     return {
@@ -36,8 +38,15 @@ export default defineComponent({
     rememberHistory: function () {
       return this.$store.getters.getRememberHistory
     },
-    saveWatchedProgress: function () {
-      return this.$store.getters.getSaveWatchedProgress
+    watchedProgressSavingMode() {
+      return this.$store.getters.getWatchedProgressSavingMode
+    },
+    watchedProgressSavingModeValueNamePairs() {
+      return [
+        ['auto', this.$t('Settings.Privacy Settings.Watched Progress Saving Mode.Modes.Auto')],
+        ['semi-auto', this.$t('Settings.Privacy Settings.Watched Progress Saving Mode.Modes.Semi-auto')],
+        ['never', this.$t('Settings.Privacy Settings.Watched Progress Saving Mode.Modes.Never')],
+      ]
     },
     saveVideoHistoryWithLastViewedPlaylist: function () {
       return this.$store.getters.getSaveVideoHistoryWithLastViewedPlaylist
@@ -69,7 +78,7 @@ export default defineComponent({
 
     handleRememberHistory: function (value) {
       if (!value) {
-        this.updateSaveWatchedProgress(false)
+        this.updateWatchedProgressSavingMode('never')
       }
 
       this.updateRememberHistory(value)
@@ -123,7 +132,7 @@ export default defineComponent({
       'updateRememberHistory',
       'removeAllHistory',
       'updateRememberSearchHistory',
-      'updateSaveWatchedProgress',
+      'updateWatchedProgressSavingMode',
       'updateSaveVideoHistoryWithLastViewedPlaylist',
       'clearSessionSearchHistory',
       'removeAllSearchHistoryEntries',

src/renderer/components/privacy-settings/privacy-settings.vue

@@ -20,12 +20,15 @@
         />
       </div>
       <div class="switchColumn">
-        <ft-toggle-switch
-          :label="$t('Settings.Privacy Settings.Save Watched Progress')"
-          :compact="true"
+        <ft-select
+          :placeholder="$t('Settings.Privacy Settings.Save Watched Progress')"
+          :value="watchedProgressSavingMode"
+          :select-names="watchedProgressSavingModeValueNamePairs.map(p => p[1])"
+          :select-values="watchedProgressSavingModeValueNamePairs.map(p => p[0])"
+          :icon="['fas', 'bars-progress']"
+          :tooltip="$t('Settings.Privacy Settings.Watched Progress Saving Mode.Tooltip')"
           :disabled="!rememberHistory"
-          :default-value="saveWatchedProgress"
-          @change="updateSaveWatchedProgress"
+          @change="updateWatchedProgressSavingMode"
         />
       </div>
       <div class="switchColumn">

src/renderer/components/watch-video-info/watch-video-info.js

@@ -116,7 +116,13 @@ export default defineComponent({
       required: false
     }
   },
-  emits: ['change-format', 'pause-player', 'set-info-area-sticky', 'scroll-to-info-area'],
+  emits: [
+    'change-format',
+    'pause-player',
+    'set-info-area-sticky',
+    'scroll-to-info-area',
+    'save-watched-progress',
+  ],
   computed: {
     hideSharingActions: function() {
       return this.$store.getters.getHideSharingActions
@@ -142,6 +148,10 @@ export default defineComponent({
       return !this.$store.getters.getHidePlaylists
     },
 
+    watchedProgressSavingInSemiAutoMode() {
+      return this.$store.getters.getWatchedProgressSavingMode === 'semi-auto'
+    },
+
     downloadLinkOptions: function () {
       return this.downloadLinks.map((download) => {
         return {
@@ -409,6 +419,10 @@ export default defineComponent({
       this.$emit('change-format', value)
     },
 
+    saveWatchedProgressManually() {
+      this.$emit('save-watched-progress')
+    },
+
     ...mapActions([
       'openInExternalPlayer',
       'downloadMedia',

src/renderer/components/watch-video-info/watch-video-info.scss

@@ -66,26 +66,33 @@
 
   .videoOptions {
     display: flex;
-    flex-wrap: wrap;
-    justify-content: flex-end;
     gap: 4px;
 
-    @media screen and (width <= 680px) {
+    @media screen and (width <= 380px) {
+      flex-direction: column;
+      align-items: flex-start;
+      margin-block-start: 10px;
+    }
+  }
+
+  .videoOptionsMobileRow {
+    display: flex;
+    gap: 4px;
+
+    @media screen and (width <= 730px) {
       :deep(.iconDropdown) {
         inset-inline: auto calc(50% - 20px);
       }
     }
 
     @media screen and (width <= 460px) {
-      flex-wrap: nowrap;
-
       :deep(.iconDropdown) {
         inset-inline: auto;
       }
     }
   }
 
-  @media screen and (width <= 460px) {
+  @media screen and (width <= 730px) {
     flex-direction: column;
     align-items: flex-start;
     margin-block-start: 10px;

src/renderer/components/watch-video-info/watch-video-info.vue

@@ -85,60 +85,70 @@
         </div>
       </div>
       <div class="videoOptions">
-        <ft-icon-button
-          v-if="showPlaylists && !isUpcoming"
-          :title="$t('User Playlists.Add to Playlist')"
-          :icon="['fas', 'plus']"
-          class="option"
-          theme="base"
-          @click="togglePlaylistPrompt"
-        />
-        <ft-icon-button
-          v-if="isQuickBookmarkEnabled"
-          :title="quickBookmarkIconText"
-          :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
-          class="quickBookmarkVideoIcon"
-          :class="{
-            bookmarked: isInQuickBookmarkPlaylist,
-          }"
-          :theme="quickBookmarkIconTheme"
-          @click="toggleQuickBookmarked"
-        />
-        <ft-icon-button
-          v-if="externalPlayer !== ''"
-          :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
-          :icon="['fas', 'external-link-alt']"
-          class="option"
-          theme="secondary"
-          @click="handleExternalPlayer"
-        />
-        <ft-icon-button
-          v-if="!isUpcoming && downloadLinks.length > 0"
-          ref="downloadButton"
-          :title="$t('Video.Download Video')"
-          class="option"
-          theme="secondary"
-          :icon="['fas', 'download']"
-          :return-index="true"
-          :dropdown-options="downloadLinkOptions"
-          @click="handleDownload"
-        />
-        <ft-icon-button
-          v-if="!isUpcoming"
-          :title="$t('Change Format.Change Media Formats')"
-          class="option"
-          theme="secondary"
-          :icon="['fas', 'file-video']"
-          :dropdown-options="formatTypeOptions"
-          @click="changeFormat($event)"
-        />
-        <ft-share-button
-          v-if="!hideSharingActions"
-          :id="id"
-          :get-timestamp="getTimestamp"
-          :playlist-id="playlistId"
-          class="option"
-        />
+        <span class="videoOptionsMobileRow">
+          <ft-icon-button
+            v-if="showPlaylists && !isUpcoming"
+            :title="$t('User Playlists.Add to Playlist')"
+            :icon="['fas', 'plus']"
+            class="option"
+            theme="base"
+            @click="togglePlaylistPrompt"
+          />
+          <ft-icon-button
+            v-if="isQuickBookmarkEnabled"
+            :title="quickBookmarkIconText"
+            :icon="isInQuickBookmarkPlaylist ? ['fas', 'check'] : ['fas', 'bookmark']"
+            class="quickBookmarkVideoIcon"
+            :class="{
+              bookmarked: isInQuickBookmarkPlaylist,
+            }"
+            :theme="quickBookmarkIconTheme"
+            @click="toggleQuickBookmarked"
+          />
+          <ft-icon-button
+            v-if="watchedProgressSavingInSemiAutoMode"
+            :title="$t('Video.Save Watched Progress')"
+            :icon="['fas', 'bars-progress']"
+            @click="saveWatchedProgressManually"
+          />
+        </span>
+        <span class="videoOptionsMobileRow">
+          <ft-icon-button
+            v-if="externalPlayer !== ''"
+            :title="$t('Video.External Player.OpenInTemplate', { externalPlayer })"
+            :icon="['fas', 'external-link-alt']"
+            class="option"
+            theme="secondary"
+            @click="handleExternalPlayer"
+          />
+          <ft-icon-button
+            v-if="!isUpcoming && downloadLinks.length > 0"
+            ref="downloadButton"
+            :title="$t('Video.Download Video')"
+            class="option"
+            theme="secondary"
+            :icon="['fas', 'download']"
+            :return-index="true"
+            :dropdown-options="downloadLinkOptions"
+            @click="handleDownload"
+          />
+          <ft-icon-button
+            v-if="!isUpcoming"
+            :title="$t('Change Format.Change Media Formats')"
+            class="option"
+            theme="secondary"
+            :icon="['fas', 'file-video']"
+            :dropdown-options="formatTypeOptions"
+            @click="changeFormat($event)"
+          />
+          <ft-share-button
+            v-if="!hideSharingActions"
+            :id="id"
+            :get-timestamp="getTimestamp"
+            :playlist-id="playlistId"
+            class="option"
+          />
+        </span>
       </div>
     </div>
   </ft-card>

src/renderer/main.js

@@ -24,6 +24,7 @@ import {
   faArrowRight,
   faArrowUp,
   faBars,
+  faBarsProgress,
   faBorderAll,
   faBookmark,
   faCheck,
@@ -148,6 +149,7 @@ library.add(
   faArrowRight,
   faArrowUp,
   faBars,
+  faBarsProgress,
   faBorderAll,
   faBookmark,
   faCheck,

src/renderer/store/modules/settings.js

@@ -234,6 +234,8 @@ const state = {
   rememberHistory: true,
   rememberSearchHistory: true,
   saveWatchedProgress: true,
+  // 'auto', 'semi-auto', 'never'
+  watchedProgressSavingMode: 'auto',
   saveVideoHistoryWithLastViewedPlaylist: true,
   showFamilyFriendlyOnly: false,
   sponsorBlockShowSkippedToast: true,