Add setting to disable thumbnails in the media controls

- This should help prevent issues with the thumbnail
blocking the media controls from displaying, causing
all of the media controls info to get out of sync.
- This should also not get in the way of newer versions
of Android which handle this gracefully because this setting
is enabled by default. If someone is experiencing issues,
they can just flip the switch off, but otherwise, everything should
just work.

Also, I should note that I am adding more locale strings here.
I'm trying to avoid this as much as possible until the weblate
stuff is setup, but I can't figure this media control issue out.
I'm adding the ticket reference here in order to keep track of these
locale strings #92.

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

@@ -13,11 +13,15 @@ export default defineComponent({
   computed: {
     getDisableBackgroundModeNotification: function () {
       return this.$store.getters.getDisableBackgroundModeNotification
+    },
+    getShowThumbnailInMediaControls: function () {
+      return this.$store.getters.getShowThumbnailInMediaControls
     }
   },
   methods: {
     ...mapActions([
       'updateDisableBackgroundModeNotification',
+      'updateShowThumbnailInMediaControls'
     ])
   }
 })

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

@@ -10,6 +10,13 @@
         :default-value="getDisableBackgroundModeNotification"
         @change="updateDisableBackgroundModeNotification"
       />
+      <ft-toggle-switch
+        :label="$t('Settings.Cordova Settings.Show Thumbnail in Media Controls')"
+        :compact="true"
+        :tooltip="$t('Tooltips.Cordova Settings.Show Thumbnail in Media Controls')"
+        :default-value="getShowThumbnailInMediaControls"
+        @change="updateShowThumbnailInMediaControls"
+      />
     </div>
   </ft-settings-section>
 </template>

src/renderer/helpers/utils.js

@@ -324,10 +324,11 @@ export async function showSaveDialog (options) {
   } else {
     // If the native filesystem api is available
     if ('showSaveFilePicker' in window) {
+      const pathParts = options.defaultPath.split('/')
       return {
         canceled: false,
         handle: await window.showSaveFilePicker({
-          suggestedName: options.defaultPath.split('/').at(-1),
+          suggestedName: pathParts[pathParts.length - 1],
           types: options.filters[0]?.extensions?.map((extension) => {
             return {
               accept: {

src/renderer/store/modules/settings.js

@@ -278,7 +278,8 @@ const state = {
   screenshotFolderPath: '',
   screenshotFilenamePattern: '%Y%M%D-%H%N%S',
   fetchSubscriptionsAutomatically: true,
-  settingsPassword: ''
+  settingsPassword: '',
+  showThumbnailInMediaControls: true
 }
 
 const stateWithSideEffects = {

src/renderer/views/Watch/Watch.js

@@ -176,31 +176,25 @@ export default defineComponent({
     },
     hideChapters: function () {
       return this.$store.getters.getHideChapters
+    },
+    showThumbnailInMediaControls: function () {
+      return this.$store.getters.getShowThumbnailInMediaControls
     }
   },
   watch: {
-    channelName() {
-      if (process.env.IS_CORDOVA) {
-        if (MusicControls === undefined) {
-          console.error('Music controls plugin failed to load.')
-        } else {
-          MusicControls.create({
-            track: this.videoTitle,
-            artist: this.channelName
-          })
-        }
-      }
-    },
     thumbnail() {
       if (process.env.IS_CORDOVA) {
         if (MusicControls === undefined) {
           console.error('Music controls plugin failed to load.')
         } else {
-          MusicControls.create({
+          const data = {
             track: this.videoTitle,
-            artist: this.channelName,
-            cover: this.thumbnail
-          })
+            artist: this.channelName
+          }
+          if (this.showThumbnailInMediaControls) {
+            data.cover = this.thumbnail
+          }
+          MusicControls.create(data)
           const playPauseListeners = []
           MusicControls.subscribe((action) => {
             try {
@@ -1199,10 +1193,6 @@ export default defineComponent({
       // takes long enough for the video id to have already changed to the new one
       // receiving it as an arg instead of accessing it ourselves means we always have the right one
       if (process.env.IS_CORDOVA) {
-        // I'm struggling with the differences between different versions of android
-        // and destroying this twice is the only way I can figure out how to make it work
-        // https://github.com/ghenry22/cordova-plugin-music-controls2/issues/90
-        MusicControls.destroy()
         MusicControls.destroy()
       }
       clearTimeout(this.playNextTimeout)

static/locales/en-US.yaml

@@ -433,6 +433,8 @@ Settings:
       Cordova Settings
     Disable Background Notification:
       Disable notification when app in background
+    Show Thumbnail in Media Controls:
+      Show thumbnail in media controls
 About:
   #On About page
   About: About
@@ -816,6 +818,8 @@ Tooltips:
   Cordova Settings:
     Disable Background Notification:
       Disables the "FreeTube is running" background notificiation. Beware, disabling this notification may cause Android to close the app when it is in the background.
+    Show Thumbnail in Media Controls:
+      Sometimes, the media controls info will get out of sync due to an issue with the thumbnail. If you are experiencing problems with the media controls on Android 11, this may resolve them.
 # Toast Messages
 Local API Error (Click to copy): Local API Error (Click to copy)
 Invidious API Error (Click to copy): Invidious API Error (Click to copy)