CSS for player.php, make JS more modular

11 years ago · 2a770f27d1
7 changed files with 47 additions and 29 deletions
--- 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';
--- a/defaults.js
+++ 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);
--- 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);
--- 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>
--- 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);
--- a/playerstyle.css
+++ b/playerstyle.css
@ -0,0 +1,9 @@
+body {
+    background: black;
+    color: white;
+}
+video {
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
--- 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);