Fixes

- Player controls not being usable (z-index) Setting: - Automatically start slideshow in fullscreen
RoyalBingBong · Feb 10, 2018 · 3f1a9ef · 3f1a9ef
1 parent 7da6dc1
commit 3f1a9ef
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 55 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-  "cSpell.enabled": true
+  "cSpell.enabled": false
 }
diff --git a/app/css/core.css b/app/css/core.css
@@ -38,6 +38,7 @@ kbd {
 video::-webkit-media-controls-panel {
   display: flex !important;
   opacity: .5 !important;
+  z-index: 1000;
 }
 
 .novideoui video::-webkit-media-controls-panel {

diff --git a/app/index.html b/app/index.html
@@ -41,7 +41,7 @@
     <div>
       <div class="settings-header">
         <div class="title" data-i18n="Settings">Settings</div>
-        <button id="settings-close-x" href="#">
+        <button id="settings-close-x">
           <i class="fa fa-times-circle" aria-hidden="true"></i>
         </button>
       </div>
@@ -69,17 +69,7 @@
                 </label>
               </div>
               <div class="labelgroup">
-                <span class="spacer"></span>
-                <label for="general-slideshowinterval" data-i18n="Slideshow interval">
-                  Slideshow interval:
-                </label>
-                <span>
-                  <input id="general-slideshowinterval" class="" type="number" min="1" value="1">
-                </span>
-                <label for="general-slideshowinterval" data-i18n="seconds">seconds</label>
-              </div>
-              <div class="labelgroup">
-                <fieldset id="">
+                <fieldset>
                   <legend data-i18n="settings.general.folderendbehaviour">Behavior when hitting the end of a folder</legend>
                   <input type="radio" name="folderendbehaviour" value="openselectfolder" id="general-folderendbehaviour-openselectfolder">
                   <span class="spacer"></span>
@@ -100,6 +90,33 @@
               </div>
             </fieldset>
           </form>
+          <form>
+            <fieldset>
+              <legend data-i18n="Slideshow">Slideshow</legend>
+              <div class="labelgroup">
+                <span class="spacer"></span>
+                <label for="slideshow-interval" data-i18n="Slideshow interval">
+                  Slideshow interval:
+                </label>
+                <span>
+                  <input id="slideshow-interval" class="" type="number" min="1" value="1">
+                </span>
+                <label for="slideshow-interval" data-i18n="seconds">seconds</label>
+              </div>
+              <div class="labelgroup">
+                <input id="slideshow-waitforvideo" type="checkbox">
+                <label for="slideshow-waitforvideo" data-i18n="settings.slideshow.waitforvideo">
+                  Wait for videos to end before viewing the next file
+                </label>
+              </div>
+              <div class="labelgroup">
+                <input id="slideshow-startfullscreen" type="checkbox">
+                <label for="slideshow-startfullscreen" data-i18n="settings.slideshow.startfullscreen">
+                  Automatically go into fullscreen when starting
+                </label>
+              </div>
+            </fieldset>
+          </form>
           <form>
             <fieldset>
               <legend data-i18n="Video">Video</legend>
@@ -134,13 +151,13 @@
                 <label for="video-skipinterval" data-i18n="seconds">
                   seconds
                 </label>
-                <i class="fa fa-info-circle tooltip" aria-hidden="true">
+                <span class="fa fa-info-circle tooltip" aria-hidden="true">
                   <p class="infotext" data-i18n="settings.info.skipinterval">Used when forwarding or rewinding a video with Shift+Right-Arrow or Shift+Left-Arrow.</p>
-                </i>
+                </span>
+
               </div>
             </fieldset>
           </form>
-
           <form>
             <fieldset>
               <legend data-i18n="User Interface">User Interface</legend>
@@ -151,7 +168,7 @@
                   </label>:
                 </div>
                 <div class="cb">
-                  <select name="" id="ui-language"></select>
+                  <select id="ui-language"></select>
                 </div>
                 <div class="cb-clear"></div>
               </div>
@@ -165,7 +182,7 @@
                   </label>:
                 </div>
                 <div class="cb">
-                  <select name="" id="ui-theme"></select>
+                  <select id="ui-theme"></select>
                   <button class="iconbutton" id="ui-refreshthemes">
                     <i class="fa fa-refresh" aria-hidden="true"></i>
                   </button>
@@ -245,7 +262,7 @@
             <fieldset>
               <legend data-i18n="Operating System">Operating System</legend>
               <div class="labelgroup">
-                <label for="" data-i18n="settings.os.wincontext">
+                <label data-i18n="settings.os.wincontext">
                   Windows Explorer context menu
                 </label>:
                 <button id="os-windows-contextmenu" class="">Install</button>
@@ -268,15 +285,15 @@
               </div>
               <div class="labelgroup">
                 <span class="spacer"></span>
-                <label for="" data-i18n="settings.default"></label>:
+                <label data-i18n="settings.default"></label>:
                 <button id="resettodefault" class="" data-i18n="Reset">Reset</button>
               </div>
             </fieldset>
           </form>
         </div>
       </div>
       <div class="settings-footer">
-        <button id="settings-close" href="#" data-i18n="Close">Close</button>
+        <button id="settings-close" data-i18n="Close">Close</button>
       </div>
     </div>
   </div>

diff --git a/app/locales/de.json b/app/locales/de.json
@@ -1,7 +1,7 @@
 {
 	"dropzone": {
 		"title": "Dateien oder Ordner hereinziehen",
-		"tip": "Shift gedrückt halten um einen Ordner rekursiv zu öffnen"
+		"tip": "<kbd>Shift</kbd> gedrückt halten um einen Ordner rekursiv zu öffnen"
 	},
 	"errors": {
 		"nomediafiles": "Keine Bilder oder Videos in \"%s\""
@@ -47,7 +47,7 @@
 	"Reset": "Zurücksetzen",
 	"settings": {
 		"general": {
-			"closewithesc": "meView mit ESC schließen",
+			"closewithesc": "meView mit <kbd>ESC</kbd> schließen",
 			"savepath": "Starte im zuletzt benutzen Pfad bei \"Datei > Datei öffnen\" oder \"Datei > Ordner öffnen\"",
 			"reopenlast": "Automatisch die zuletzt betrachtete Datei öffnen",
 			"folderendbehaviour": "Verhalten beim Erreichen der letzten Datei im Ordner"
@@ -64,7 +64,11 @@
 		},
 		"default": "Werkseinstellungen",
 		"resetdefault": "Sind Sie sicher, dass sie die Einstellung zurücksetzen wollen? meView wird danach neu gestartet.",
-		"resetdefaultwin32": "Sind Sie sicher, dass sie die Einstellung zurücksetzen wollen? Dies entfernt auch den Kontextmenü-Eintrag im Windows Explorer! meView wird danach neu gestartet."
+		"resetdefaultwin32": "Sind Sie sicher, dass sie die Einstellung zurücksetzen wollen? Dies entfernt auch den Kontextmenü-Eintrag im Windows Explorer! meView wird danach neu gestartet.",
+		"slideshow": {
+			"waitforvideo": "Auf Ende von Videos warten",
+			"startfullscreen": "Diashow im Vollbild starten"
+		}
 	},
 	"contextmenu": {
 		"install": {
@@ -90,7 +94,7 @@
 	"Installed": "Installiert",
 	"Slideshow interval": "Diashow Zeitabstand:",
 	"seconds": "Sekunden",
-	"Skip interval": "Spulintervall:",
+	"Skip interval": "Intervall beim spulen:",
 	"Current folder": "Aktueller Ordner",
 	"Open": "Öffnen",
 	"Cancel": "Abbrechen",

diff --git a/app/locales/en.json b/app/locales/en.json
@@ -1,6 +1,6 @@
 {
 	"dropzone": {
-		"tip": "Hold shift to open a folder recursive",
+		"tip": "Hold <kbd>Shift</kbd> to open a folder recursive",
 		"title": "Drop file or folder here"
 	},
 	"errors": {
@@ -47,9 +47,9 @@
 	"Reset": "Reset",
 	"settings": {
 		"general": {
-			"closewithesc": "Close meView when pressing ESC",
+			"closewithesc": "Close meView when pressing <kbd>ESC</kbd>",
 			"savepath": "Save last used path when using \"File > Open File\" or \"File > Open Folder\"",
-			"reopenlast": "Automatically reopen the last viewed file",
+			"reopenlast": "Re-open the last viewed file when starting meView",
 			"folderendbehaviour": "Behavior when hitting the last file in a folder"
 		},
 		"advanced": {
@@ -60,11 +60,15 @@
 		},
 		"info": {
 			"skipinterval": "Used when forwarding or rewinding a video with <kbd>Shift</kbd> + <kbd>Right Arrow</kbd> or <kbd>Shift</kbd> + <kbd>Left Arrow</kbd>.",
-			"wincontext": "This will install a context menu entry in Windows Explorer, which allows you to rightclick a file, folder or on the directory background to it in meView."
+			"wincontext": "This will install a context menu entry in Windows Explorer, which allows you to right-click a file, folder or on the directory background to it in meView."
 		},
 		"default": "Default settings",
 		"resetdefault": "Are you sure you want to reset to the default settings? meView will reload after resetting.",
-		"resetdefaultwin32": "Are you sure you want to reset to the default settings? Resetting will also remove the Windows Explorer context menu entry! meView will restart after the reset."
+		"resetdefaultwin32": "Are you sure you want to reset to the default settings? Resetting will also remove the Windows Explorer context menu entry! meView will restart after the reset.",
+		"slideshow": {
+			"waitforvideo": "Wait for videos to end before viewing next file",
+			"startfullscreen": "Start slideshow in fullscreen"
+		}
 	},
 	"contextmenu": {
 		"install": {

diff --git a/app/src/controllers/Settings.js b/app/src/controllers/Settings.js
@@ -14,13 +14,17 @@ export default class Settings {
       closeWithESC: document.getElementById("general-closewithesc"),
       savePath: document.getElementById("general-savepath"),
       reopenLast: document.getElementById("general-reopenlast"),
-      slideshowInterval: document.getElementById("general-slideshowinterval"),
       folderendbehaviour: {
         openselectfolder: document.getElementById("general-folderendbehaviour-openselectfolder"),
         loopfolder: document.getElementById("general-folderendbehaviour-loopfolder"),
         donothing: document.getElementById("general-folderendbehaviour-donothing")
       }
     }
+    this.slideshow = {
+      interval: document.getElementById("slideshow-interval"),
+      waitforvideo: document.getElementById("slideshow-waitforvideo"),
+      startfullscreen: document.getElementById("slideshow-startfullscreen")
+    }
 
     this.video = {
       autoplay: document.getElementById("video-autoplay"),
@@ -57,6 +61,7 @@ export default class Settings {
     this._initInputNumber()
 
     this._initGeneralSettingsHandler()
+    this._initSlideshowSettingsHandler()
     this._initVideoSettingsHandler()
     this._initUISettingsHandler()
     this._initOsSettingsHandler()
@@ -70,7 +75,6 @@ export default class Settings {
     this.general.closeWithESC.checked = UserSettings.closeWithESC
     this.general.savePath.checked = UserSettings.savePath
     this.general.reopenLast.checked = UserSettings.reopenLastFile
-    this.general.slideshowInterval.value = UserSettings.slideshowInterval
     switch(UserSettings.folderEndBehaviour) {
       case "openselectfolder":
         this.general.folderendbehaviour.openselectfolder.checked = true
@@ -87,6 +91,13 @@ export default class Settings {
         break;
     }
 
+    /**
+     * Sldieshow
+     */
+    this.slideshow.interval.value = UserSettings.slideshowInterval
+    this.slideshow.waitforvideo.checked = UserSettings.slideshowVideoFull
+    this.slideshow.startfullscreen.checked = UserSettings.slideshowStartFullscreen
+
     /**
      * Video
      */
@@ -201,7 +212,7 @@ export default class Settings {
 
   _initInputNumber() {
     this.incdec = {
-      slideshowInterval: new InputIncDec(this.general.slideshowInterval),
+      slideshowInterval: new InputIncDec(this.slideshow.interval),
       skipinterval: new InputIncDec(this.video.skipInterval)
     }
   }
@@ -216,42 +227,53 @@ export default class Settings {
     this.general.reopenLast.onchange = () => {
       UserSettings.reopenLastFile = this.general.reopenLast.checked
     }
-    this.general.slideshowInterval.onchange = () => {
+
+    let {openselectfolder, loopfolder, donothing} = this.general.folderendbehaviour
+    function folderEndBehaviourChanged() {
+      if(openselectfolder.checked) {
+        UserSettings.folderEndBehaviour = "openselectfolder"
+      } else if(loopfolder.checked) {
+        UserSettings.folderEndBehaviour = "loopfolder"
+      } else if (donothing.checked) {
+        UserSettings.folderEndBehaviour = "donothing"
+      }
+    }
+    openselectfolder.onchange = folderEndBehaviourChanged
+    loopfolder.onchange = folderEndBehaviourChanged
+    donothing.onchange = folderEndBehaviourChanged
+  }
+
+  _initSlideshowSettingsHandler() {
+    this.slideshow.interval.onchange = () => {
       UserSettings.slideshowInterval = parseInt(
-        this.general.slideshowInterval.value,
+        this.slideshow.interval.value,
         10
       )
     }
 
-    this.general.slideshowInterval.onwheel = (e) => {
+    this.slideshow.interval.onwheel = (e) => {
       e.stopPropagation()
       e.preventDefault()
       if (e.wheelDelta > 0) {
-        let val = parseInt(this.general.slideshowInterval.value)
+        let val = parseInt(this.slideshow.interval.value)
         val++
-        this.general.slideshowInterval.value = val
-        this.general.slideshowInterval.dispatchEvent(new Event("change"))
+        this.slideshow.interval.value = val
+        this.slideshow.interval.dispatchEvent(new Event("change"))
       } else {
-        let val = parseInt(this.general.slideshowInterval.value)
+        let val = parseInt(this.slideshow.interval.value)
         val--
-        this.general.slideshowInterval.value = val
-        this.general.slideshowInterval.dispatchEvent(new Event("change"))
+        this.slideshow.interval.value = val
+        this.slideshow.interval.dispatchEvent(new Event("change"))
       }
     }
 
-    let {openselectfolder, loopfolder, donothing} = this.general.folderendbehaviour
-    function folderEndBehaviourChanged() {
-      if(openselectfolder.checked) {
-        UserSettings.folderEndBehaviour = "openselectfolder"
-      } else if(loopfolder.checked) {
-        UserSettings.folderEndBehaviour = "loopfolder"
-      } else if (donothing.checked) {
-        UserSettings.folderEndBehaviour = "donothing"
-      }
+    this.slideshow.waitforvideo.onchange = () => {
+      UserSettings.slideshowVideoFull = this.slideshow.waitforvideo.checked
+    }
+
+    this.slideshow.startfullscreen.onchange = () => {
+      UserSettings.slideshowStartFullscreen = this.slideshow.startfullscreen.checked
     }
-    openselectfolder.onchange = folderEndBehaviourChanged
-    loopfolder.onchange = folderEndBehaviourChanged
-    donothing.onchange = folderEndBehaviourChanged
   }
 
   _initVideoSettingsHandler() {

diff --git a/app/src/modules/MediaFile.js b/app/src/modules/MediaFile.js
@@ -5,7 +5,9 @@ import UserSettings from "./UserSettings.js"
 export default class MediaFile extends EventEmitter {
   constructor(name, fullpath, mimetype) {
     super()
-    ;(this.name = name), (this.path = fullpath), (this.mimetype = mimetype)
+    this.name = name
+    this.path = fullpath
+    this.mimetype = mimetype
     this.loaded = false
     this._element
   }

diff --git a/app/src/modules/UserSettings.js b/app/src/modules/UserSettings.js
@@ -127,6 +127,14 @@ class UserSettings extends EventEmitter {
     settings.setSync("slideshow.videofull", full)
   }
 
+  get slideshowStartFullscreen() {
+    return settings.getSync("slideshow.startfullscreen")
+  }
+
+  set slideshowStartFullscreen(fullscree) {
+    settings.setSync("slideshow.startfullscreen", fullscree)
+  }
+
   get reopenLastFile() {
     return settings.getSync("reopenLastFile")
   }

diff --git a/app/src/modules/Viewer.js b/app/src/modules/Viewer.js
@@ -137,6 +137,9 @@ class Viewer {
         this.mediafiles.shuffle()
       }
       this.timeout = timeout
+      if (UserSettings.slideshowStartFullscreen) {
+        Window.setFullscreen(true)
+      }
 
       this.slideshowNext(this.mediafiles.first)
       resolve()