From 5f1818ee91c19647468dca26656bcc6f92884e5e Mon Sep 17 00:00:00 2001
From: Luca Hohmann <34301369+GilgusMaximus@users.noreply.github.com>
Date: Sat, 29 May 2021 20:35:28 +0200
Subject: [PATCH] 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
---
 .../ft-video-player/ft-video-player.js        |  8 ++++++-
 .../player-settings/player-settings.js        |  7 +++++-
 .../player-settings/player-settings.vue       |  6 +++++
 src/renderer/store/modules/settings.js        | 22 +++++++++++++++++--
 static/locales/en-US.yaml                     |  1 +
 5 files changed, 40 insertions(+), 4 deletions(-)

diff --git a/src/renderer/components/ft-video-player/ft-video-player.js b/src/renderer/components/ft-video-player/ft-video-player.js
index 5b30085a..9b692e3e 100644
--- a/src/renderer/components/ft-video-player/ft-video-player.js
+++ b/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({
diff --git a/src/renderer/components/player-settings/player-settings.js b/src/renderer/components/player-settings/player-settings.js
index f03baf8d..5e49d074 100644
--- a/src/renderer/components/player-settings/player-settings.js
+++ b/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'
     ])
   }
 })
diff --git a/src/renderer/components/player-settings/player-settings.vue b/src/renderer/components/player-settings/player-settings.vue
index 6594c1d7..05c1e00b 100644
--- a/src/renderer/components/player-settings/player-settings.vue
+++ b/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
diff --git a/src/renderer/store/modules/settings.js b/src/renderer/store/modules/settings.js
index 1319063f..7ae47291 100644
--- a/src/renderer/store/modules/settings.js
+++ b/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
   },
diff --git a/static/locales/en-US.yaml b/static/locales/en-US.yaml
index c75b8f4d..d86bd671 100644
--- a/static/locales/en-US.yaml
+++ b/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