Setting to enable and disable display of video play button (#1370)

* Added setting to toggle play button in video player

* Fixed wrong way around boolean check

* Fixed setting not loading on startup

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

@@ -165,6 +165,10 @@ export default Vue.extend({
 
     sponsorBlockShowSkippedToast: function () {
       return this.$store.getters.getSponsorBlockShowSkippedToast
+    },
+
+    displayVideoPlayButton: function() {
+      return this.$store.getters.getDisplayVideoPlayButton
     }
   },
   mounted: function () {
@@ -223,7 +227,9 @@ export default Vue.extend({
         this.player.playbackRate(this.defaultPlayback)
         // Remove big play button
         // https://github.com/videojs/video.js/blob/v7.12.1/docs/guides/components.md#basic-example
-        this.player.removeChild('BigPlayButton')
+        if (!this.displayVideoPlayButton) {
+          this.player.removeChild('BigPlayButton')
+        }
 
         if (this.storyboardSrc !== '') {
           this.player.vttThumbnails({

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

@@ -94,6 +94,10 @@ export default Vue.extend({
       return this.$store.getters.getVideoVolumeMouseScroll
     },
 
+    displayVideoPlayButton: function () {
+      return this.$store.getters.getDisplayVideoPlayButton
+    },
+
     formatNames: function () {
       return [
         this.$t('Settings.Player Settings.Default Video Format.Dash Formats'),
@@ -132,7 +136,8 @@ export default Vue.extend({
       'updateDefaultPlayback',
       'updateDefaultVideoFormat',
       'updateDefaultQuality',
-      'updateVideoVolumeMouseScroll'
+      'updateVideoVolumeMouseScroll',
+      'updateDisplayVideoPlayButton'
     ])
   }
 })

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

@@ -43,6 +43,12 @@
           :default-value="videoVolumeMouseScroll"
           @change="updateVideoVolumeMouseScroll"
         />
+        <ft-toggle-switch
+          :label="$t('Settings.Player Settings.Display Play Button In Video Player')"
+          :compact="true"
+          :default-value="displayVideoPlayButton"
+          @change="updateDisplayVideoPlayButton"
+        />
       </div>
       <div class="switchColumn">
         <ft-toggle-switch

src/renderer/store/modules/settings.js

@@ -80,7 +80,8 @@ const state = {
   videoVolumeMouseScroll: false,
   useSponsorBlock: false,
   sponsorBlockUrl: 'https://sponsor.ajay.app',
-  sponsorBlockShowSkippedToast: true
+  sponsorBlockShowSkippedToast: true,
+  displayVideoPlayButton: true
 }
 
 const getters = {
@@ -272,6 +273,10 @@ const getters = {
     return state.videoVolumeMouseScroll
   },
 
+  getDisplayVideoPlayButton: () => {
+    return state.displayVideoPlayButton
+  },
+
   getUseSponsorBlock: () => {
     return state.useSponsorBlock
   },
@@ -304,7 +309,6 @@ const actions = {
                 commit('setBackendFallback', result.value)
                 break
               case 'defaultProfile':
-                console.log('IN SETTING DEFAULT:', result.value)
                 commit('setDefaultProfile', result.value)
                 break
               case 'checkForUpdates':
@@ -448,6 +452,9 @@ const actions = {
                 break
               case 'sponsorBlockShowSkippedToast':
                 commit('setSponsorBlockShowSkippedToast', result.value)
+                break
+              case 'displayVideoPlayButton':
+                commit('setDisplayVideoPlayButton', result.value)
             }
           })
           resolve()
@@ -827,6 +834,14 @@ const actions = {
     })
   },
 
+  updateDisplayVideoPlayButton ({ commit }, displayVideoPlayButton) {
+    settingsDb.update({ _id: 'displayVideoPlayButton' }, { _id: 'displayVideoPlayButton', value: displayVideoPlayButton }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDisplayVideoPlayButton', displayVideoPlayButton)
+      }
+    })
+  },
+
   updateUseSponsorBlock ({ commit }, useSponsorBlock) {
     settingsDb.update({ _id: 'useSponsorBlock' }, { _id: 'useSponsorBlock', value: useSponsorBlock }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -1011,6 +1026,9 @@ const mutations = {
   setVideoVolumeMouseScroll (state, videoVolumeMouseScroll) {
     state.videoVolumeMouseScroll = videoVolumeMouseScroll
   },
+  setDisplayVideoPlayButton (state, displayVideoPlayButton) {
+    state.displayVideoPlayButton = displayVideoPlayButton
+  },
   setUseSponsorBlock (state, useSponsorBlock) {
     state.useSponsorBlock = useSponsorBlock
   },

static/locales/en-US.yaml

@@ -174,6 +174,7 @@ Settings:
     Autoplay Playlists: Autoplay Playlists
     Enable Theatre Mode by Default: Enable Theatre Mode by Default
     Scroll Volume Over Video Player: Scroll Volume Over Video Player
+    Display Play Button In Video Player: Display Play Button In Video Player
     Next Video Interval: Next Video Interval
     Default Volume: Default Volume
     Default Playback Rate: Default Playback Rate