diff options
| -rw-r--r-- | README.md | 1 | ||||
| -rw-r--r-- | defaults.js | 14 | ||||
| -rw-r--r-- | expandvideo.js | 9 | ||||
| -rw-r--r-- | player.php | 3 | ||||
| -rw-r--r-- | playersettings.js | 6 | ||||
| -rw-r--r-- | playerstyle.css | 9 | ||||
| -rw-r--r-- | settings.js | 34 |
7 files changed, 47 insertions, 29 deletions
@@ -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); @@ -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); |