Add Theatre Mode Toggle Setting and adjust video player side

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

@@ -96,10 +96,6 @@ export default Vue.extend({
     }
   },
   computed: {
-    listType: function () {
-      return this.$store.getters.getListType
-    },
-
     defaultPlayback: function () {
       return this.$store.getters.getDefaultPlayback
     },
@@ -112,6 +108,12 @@ export default Vue.extend({
       return this.$store.getters.getAutoplayVideos
     }
   },
+  watch: {
+    sourceList: function () {
+      console.log('Obtained Source list')
+      this.determineFormatType()
+    }
+  },
   mounted: function () {
     this.id = this._uid
 
@@ -199,7 +201,7 @@ export default Vue.extend({
       this.useHls = false
       this.activeSourceList = this.dashSrc
 
-      setTimeout(this.initializePlayer, 1000)
+      setTimeout(this.initializePlayer, 100)
     },
 
     enableLegacyFormat: function () {

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

@@ -97,6 +97,10 @@ export default Vue.extend({
 
     defaultQuality: function () {
       return this.$store.getters.getDefaultQuality
+    },
+
+    defaultTheatreMode: function () {
+      return this.$store.getters.getDefaultTheatreMode
     }
   },
   methods: {
@@ -112,6 +116,7 @@ export default Vue.extend({
       'updateEnableSubtitles',
       'updateForceLocalBackendForLegacy',
       'updateProxyVideos',
+      'updateDefaultTheatreMode',
       'updateDefaultVolume',
       'updateDefaultPlayback',
       'updateDefaultVideoFormat',

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

@@ -10,25 +10,25 @@
       <div class="switchColumn">
         <ft-toggle-switch
           label="Remember History"
-          :compact=true
+          :compact="true"
           :default-value="rememberHistory"
           @change="updateRememberHistory"
         />
         <ft-toggle-switch
           label="Enable Subtitles by Default"
-          :compact=true
+          :compact="true"
           :default-value="enableSubtitles"
           @change="updateEnableSubtitles"
         />
         <ft-toggle-switch
           label="Force Local Backend for Legacy Formats"
-          :compact=true
+          :compact="true"
           :default-value="forceLocalBackendForLegacy"
           @change="updateForceLocalBackendForLegacy"
         />
         <ft-toggle-switch
           label="Proxy Videos Through Invidious"
-          :compact=true
+          :compact="true"
           :default-value="proxyVideos"
           @change="updateProxyVideos"
         />
@@ -36,22 +36,28 @@
       <div class="switchColumn">
         <ft-toggle-switch
           label="Autoplay Videos"
-          :compact=true
+          :compact="true"
           :default-value="autoplayVideos"
           @change="updateAutoplayVideos"
         />
         <ft-toggle-switch
           label="Autoplay Playlists"
-          :compact=true
+          :compact="true"
           :default-value="autoplayPlaylists"
           @change="updateAutoplayPlaylists"
         />
         <ft-toggle-switch
           label="Play Next Video"
-          :compact=true
+          :compact="true"
           :default-value="playNextVideo"
           @change="updatePlayNextVideo"
         />
+        <ft-toggle-switch
+          label="Enable Theatre Mode by Default"
+          :compact="true"
+          :default-value="defaultTheatreMode"
+          @change="updateDefaultTheatreMode"
+        />
       </div>
     </div>
     <ft-flex-box>

src/renderer/components/side-nav/side-nav.vue

@@ -49,7 +49,7 @@
       @click="navigate('userplaylists')"
     >
       <font-awesome-icon
-        icon="star"
+        icon="bookmark"
         class="navIcon"
       />
       <p class="navLabel">

src/renderer/store/modules/settings.js

@@ -4,18 +4,23 @@ let dbLocation
 
 if (window && window.process && window.process.type === 'renderer') {
   // Electron is being used
-  let dbLocation = localStorage.getItem('dbLocation')
+  /* let dbLocation = localStorage.getItem('dbLocation')
 
   if (dbLocation === null) {
     const electron = require('electron')
     dbLocation = electron.remote.app.getPath('userData')
-  }
+  } */
 
-  dbLocation += '/settings.db'
+  const electron = require('electron')
+  dbLocation = electron.remote.app.getPath('userData')
+
+  dbLocation = dbLocation + '/settings.db'
 } else {
   dbLocation = 'settings.db'
 }
 
+console.log(dbLocation)
+
 const settingsDb = new Datastore({
   filename: dbLocation,
   autoload: true
@@ -39,6 +44,7 @@ const state = {
   enableSubtitles: true,
   forceLocalBackendForLegacy: true,
   proxyVideos: false,
+  defaultTheatreMode: false,
   defaultVolume: 1,
   defaultPlayback: 1,
   defaultVideoFormat: 'dash',
@@ -118,6 +124,10 @@ const getters = {
     return state.proxyVideos
   },
 
+  getDefaultTheatreMode: () => {
+    return state.defaultTheatreMode
+  },
+
   getDefaultVolume: () => {
     return state.defaultVolume
   },
@@ -191,6 +201,9 @@ const actions = {
             case 'proxyVideos':
               commit('setProxyVideos', result.value)
               break
+            case 'defaultTheatreMode':
+              commit('setDefaultTheatreMode', result.value)
+              break
             case 'defaultVolume':
               commit('setDefaultVolume', result.value)
               sessionStorage.setItem('volume', result.value)
@@ -330,6 +343,14 @@ const actions = {
     })
   },
 
+  updateDefaultTheatreMode ({ commit }, defaultTheatreMode) {
+    settingsDb.update({ _id: 'defaultTheatreMode' }, { _id: 'defaultTheatreMode', value: defaultTheatreMode }, { upsert: true }, (err, numReplaced) => {
+      if (!err) {
+        commit('setDefaultTheatreMode', defaultTheatreMode)
+      }
+    })
+  },
+
   updateDefaultVolume ({ commit }, defaultVolume) {
     settingsDb.update({ _id: 'defaultVolume' }, { _id: 'defaultVolume', value: defaultVolume }, { upsert: true }, (err, numReplaced) => {
       if (!err) {
@@ -436,6 +457,9 @@ const mutations = {
   setProxy (state, proxy) {
     state.proxy = proxy
   },
+  setDefaultTheatreMode (state, defaultTheatreMode) {
+    state.defaultTheatreMode = defaultTheatreMode
+  },
   setUseTor (state, useTor) {
     state.useTor = useTor
   },

src/renderer/views/Watch/Watch.css

@@ -21,7 +21,7 @@
 }
 
 .theatrePlayer {
-  width: calc(85% + 30px);
+  width: 100%;
   float: none;
   margin: 0 auto;
   margin-bottom: 10px;

src/renderer/views/Watch/Watch.js

@@ -26,7 +26,7 @@ export default Vue.extend({
     return {
       isLoading: false,
       firstLoad: true,
-      useTheatreMode: true,
+      useTheatreMode: false,
       showDashPlayer: true,
       showLegacyPlayer: false,
       showYouTubeNoCookieEmbed: false,
@@ -72,6 +72,10 @@ export default Vue.extend({
       return this.$store.getters.getProxyVideos
     },
 
+    defaultTheatreMode: function () {
+      return this.$store.getters.getDefaultTheatreMode
+    },
+
     defaultVideoFormat: function () {
       return this.$store.getters.getDefaultVideoFormat
     },
@@ -126,6 +130,7 @@ export default Vue.extend({
     this.videoStoryboardSrc = `${this.invidiousInstance}/api/v1/storyboards/${this.videoId}?height=90`
 
     this.activeFormat = this.defaultVideoFormat
+    this.useTheatreMode = this.defaultTheatreMode
 
     if (!this.usingElectron) {
       this.getVideoInformationInvidious()