CSS for player.php, make JS more modular

7 files changed, 47 insertions, 29 deletions

diff --git a/README.md b/README.md
index 53cba460..2039b318 100644
--- a/README.md
+++ b/README.md
@@ -20,6 +20,7 @@ Replace the files templates/post_thread.html and templates/post_reply.html with
 Add these lines to inc/instance-config.php:
 
     $config['allowed_ext_files'][] = 'webm';
+    $config['additional_javascript'][] = 'cc/defaults.js';
     $config['additional_javascript'][] = 'cc/settings.js';
     $config['additional_javascript'][] = 'cc/expandvideo.js';
     require_once 'cc/posthandler.php';
diff --git a/defaults.js b/defaults.js
new file mode 100644
index 00000000..71dade12
--- /dev/null
+++ b/defaults.js
@@ -0,0 +1,14 @@
+// Scripts obtain settings by calling this function
+function setting(name) {
+    return JSON.parse(localStorage[name]);
+}
+
+// Default settings
+function setDefault(name, value) {
+    if (!(name in localStorage)) {
+        localStorage[name] = JSON.stringify(value);
+    }
+}
+setDefault("videoexpand", true);
+setDefault("videohover", false);
+setDefault("videomuted", false);
diff --git a/expandvideo.js b/expandvideo.js
index 8d6124b3..26979bea 100644
--- a/expandvideo.js
+++ b/expandvideo.js
@@ -106,12 +106,7 @@ function setupVideo(thumb, url) {
     thumb.onmouseout = unhover;
 }
 
-window.onload = function() {
-    settingsPanel.style.position = "absolute";
-    settingsPanel.style.top = "1em";
-    settingsPanel.style.right = "1em";
-    document.body.insertBefore(settingsPanel, document.body.firstChild);
-
+if (window.addEventListener) window.addEventListener("load", function(e) {
     var thumbs = document.querySelectorAll("a.file");
     for (var i = 0; i < thumbs.length; i++) {
         if (/\.webm$/.test(thumbs[i].pathname)) {
@@ -124,4 +119,4 @@ window.onload = function() {
             }
         }
     }
-};
+}, false);
diff --git a/player.php b/player.php
index ecfaf953..150a1087 100644
--- a/player.php
+++ b/player.php
@@ -3,7 +3,8 @@
 <head>
     <meta charset="utf-8">
     <title><?php echo htmlspecialchars($_GET["t"]) ?></title>
-    <script src="settings.js"></script>
+    <link rel="stylesheet" href="playerstyle.css">
+    <script src="defaults.js"></script>
     <script src="playersettings.js"></script>
 </head>
 <body>
diff --git a/playersettings.js b/playersettings.js
index 6e503070..e6099ff4 100644
--- a/playersettings.js
+++ b/playersettings.js
@@ -1,7 +1,5 @@
-window.onload = function() {
-    settingsPanel.style.cssFloat = "right";
-    document.body.insertBefore(settingsPanel, document.body.firstChild);
+if (window.addEventListener) window.addEventListener("load", function(e) {
     var video = document.getElementsByTagName("video")[0];
     video.muted = setting("videomuted");
     video.play();
-};
+}, false);
diff --git a/playerstyle.css b/playerstyle.css
new file mode 100644
index 00000000..d2bba832
--- /dev/null
+++ b/playerstyle.css
@@ -0,0 +1,9 @@
+body {
+    background: black;
+    color: white;
+}
+video {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
diff --git a/settings.js b/settings.js
index 9456247a..1a718da9 100644
--- a/settings.js
+++ b/settings.js
@@ -1,19 +1,19 @@
-var settingsPanel = document.createElement("div");
-settingsPanel.innerHTML = '<div style="text-align: right;">Settings</div><div style="display: none;">'
-    + '<label><input type="checkbox" name="videoexpand" checked>Expand videos inline</label><br>'
+// Create settings menu
+var settingsMenu = document.createElement("div");
+settingsMenu.style.position = "absolute";
+settingsMenu.style.top = "1em";
+settingsMenu.style.right = "1em";
+settingsMenu.innerHTML = '<div style="text-align: right;">Settings</div><div style="display: none;">'
+    + '<label><input type="checkbox" name="videoexpand">Expand videos inline</label><br>'
     + '<label><input type="checkbox" name="videohover">Play videos on hover</label><br>'
     + '<label><input type="checkbox" name="videomuted">Start videos muted</label><br>'
     + '</div>';
 
 function refreshSettings() {
-    var settingsItems = settingsPanel.getElementsByTagName("input");
+    var settingsItems = settingsMenu.getElementsByTagName("input");
     for (var i = 0; i < settingsItems.length; i++) {
         var box = settingsItems[i];
-        if (box.name in localStorage) {
-            box.checked = JSON.parse(localStorage[box.name]);
-        } else {
-            localStorage[box.name] = JSON.stringify(box.checked);
-        }
+        box.checked = setting(box.name);
     }
 }
 
@@ -24,23 +24,23 @@ function setupCheckbox(box) {
 }
 
 refreshSettings();
-var settingsItems = settingsPanel.getElementsByTagName("input");
+var settingsItems = settingsMenu.getElementsByTagName("input");
 for (var i = 0; i < settingsItems.length; i++) {
     setupCheckbox(settingsItems[i]);
 }
 
-settingsPanel.onmouseover = function(e) {
+settingsMenu.onmouseover = function(e) {
     refreshSettings();
-    var settingsSections = settingsPanel.getElementsByTagName("div");
+    var settingsSections = settingsMenu.getElementsByTagName("div");
     settingsSections[0].style.fontWeight = "bold";
     settingsSections[1].style.display = "block";
 };
-settingsPanel.onmouseout = function(e) {
-    var settingsSections = settingsPanel.getElementsByTagName("div");
+settingsMenu.onmouseout = function(e) {
+    var settingsSections = settingsMenu.getElementsByTagName("div");
     settingsSections[0].style.fontWeight = "normal";
     settingsSections[1].style.display = "none";
 };
 
-function setting(name) {
-    return JSON.parse(localStorage[name]);
-}
+if (window.addEventListener) window.addEventListener("load", function(e) {
+    document.body.insertBefore(settingsMenu, document.body.firstChild);
+}, false);