kashire/lainchan
4
0
Fork 0
Code Issues 9 Pull Requests Releases Wiki Activity

CSS for player.php, make JS more modular

Browse Source
This commit is contained in:
ccd0 2013-11-10 01:56:45 -08:00
parent 81dbba64e2
commit 2a770f27d1
7 changed files with 47 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
README.md
View File

@ -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: Add these lines to inc/instance-config.php:
$config['allowed_ext_files'][] = 'webm'; $config['allowed_ext_files'][] = 'webm';
$config['additional_javascript'][] = 'cc/defaults.js';
$config['additional_javascript'][] = 'cc/settings.js'; $config['additional_javascript'][] = 'cc/settings.js';
$config['additional_javascript'][] = 'cc/expandvideo.js'; $config['additional_javascript'][] = 'cc/expandvideo.js';
require_once 'cc/posthandler.php'; require_once 'cc/posthandler.php';

14
defaults.js Normal file
View File

@ -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);

9
expandvideo.js
View File

@ -106,12 +106,7 @@ function setupVideo(thumb, url) {
thumb.onmouseout = unhover; thumb.onmouseout = unhover;
} }
window.onload = function() { if (window.addEventListener) window.addEventListener("load", function(e) {
settingsPanel.style.position = "absolute";
settingsPanel.style.top = "1em";
settingsPanel.style.right = "1em";
document.body.insertBefore(settingsPanel, document.body.firstChild);
var thumbs = document.querySelectorAll("a.file"); var thumbs = document.querySelectorAll("a.file");
for (var i = 0; i < thumbs.length; i++) { for (var i = 0; i < thumbs.length; i++) {
if (/\.webm$/.test(thumbs[i].pathname)) { if (/\.webm$/.test(thumbs[i].pathname)) {
@ -124,4 +119,4 @@ window.onload = function() {
} }
} }
} }
}; }, false);

3
player.php
View File

@ -3,7 +3,8 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title><?php echo htmlspecialchars($_GET["t"]) ?></title> <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> <script src="playersettings.js"></script>
</head> </head>
<body> <body>

6
playersettings.js
View File

@ -1,7 +1,5 @@
window.onload = function() { if (window.addEventListener) window.addEventListener("load", function(e) {
settingsPanel.style.cssFloat = "right";
document.body.insertBefore(settingsPanel, document.body.firstChild);
var video = document.getElementsByTagName("video")[0]; var video = document.getElementsByTagName("video")[0];
video.muted = setting("videomuted"); video.muted = setting("videomuted");
video.play(); video.play();
}; }, false);

9
playerstyle.css Normal file
View File

@ -0,0 +1,9 @@
body {
background: black;
color: white;
}
video {
display: block;
margin-left: auto;
margin-right: auto;
}

34
settings.js
View File

@ -1,19 +1,19 @@
var settingsPanel = document.createElement("div"); // Create settings menu
settingsPanel.innerHTML = '<div style="text-align: right;">Settings</div><div style="display: none;">' var settingsMenu = document.createElement("div");
+ '<label><input type="checkbox" name="videoexpand" checked>Expand videos inline</label><br>' 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="videohover">Play videos on hover</label><br>'
+ '<label><input type="checkbox" name="videomuted">Start videos muted</label><br>' + '<label><input type="checkbox" name="videomuted">Start videos muted</label><br>'
+ '</div>'; + '</div>';
function refreshSettings() { function refreshSettings() {
var settingsItems = settingsPanel.getElementsByTagName("input"); var settingsItems = settingsMenu.getElementsByTagName("input");
for (var i = 0; i < settingsItems.length; i++) { for (var i = 0; i < settingsItems.length; i++) {
var box = settingsItems[i]; var box = settingsItems[i];
if (box.name in localStorage) { box.checked = setting(box.name);
box.checked = JSON.parse(localStorage[box.name]);
} else {
localStorage[box.name] = JSON.stringify(box.checked);
}
} }
} }
@ -24,23 +24,23 @@ function setupCheckbox(box) {
} }
refreshSettings(); refreshSettings();
var settingsItems = settingsPanel.getElementsByTagName("input"); var settingsItems = settingsMenu.getElementsByTagName("input");
for (var i = 0; i < settingsItems.length; i++) { for (var i = 0; i < settingsItems.length; i++) {
setupCheckbox(settingsItems[i]); setupCheckbox(settingsItems[i]);
} }
settingsPanel.onmouseover = function(e) { settingsMenu.onmouseover = function(e) {
refreshSettings(); refreshSettings();
var settingsSections = settingsPanel.getElementsByTagName("div"); var settingsSections = settingsMenu.getElementsByTagName("div");
settingsSections[0].style.fontWeight = "bold"; settingsSections[0].style.fontWeight = "bold";
settingsSections[1].style.display = "block"; settingsSections[1].style.display = "block";
}; };
settingsPanel.onmouseout = function(e) { settingsMenu.onmouseout = function(e) {
var settingsSections = settingsPanel.getElementsByTagName("div"); var settingsSections = settingsMenu.getElementsByTagName("div");
settingsSections[0].style.fontWeight = "normal"; settingsSections[0].style.fontWeight = "normal";
settingsSections[1].style.display = "none"; settingsSections[1].style.display = "none";
}; };
function setting(name) { if (window.addEventListener) window.addEventListener("load", function(e) {
return JSON.parse(localStorage[name]); document.body.insertBefore(settingsMenu, document.body.firstChild);
} }, false);