@@ -20,12 +20,20 @@ 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'; | |||
event_handler('post', 'postHandler'); | |||
And add this to stylesheets/style.css: | |||
video.post-image {display: block; float: left; margin: 10px 20px; border: none;} | |||
video.post-image { | |||
display: block; | |||
float: left; | |||
margin: 10px 20px; | |||
border: none; | |||
} | |||
span.settings { | |||
position: absolute; | |||
top: 1em; | |||
right: 1em; | |||
} |
@@ -1,14 +0,0 @@ | |||
// 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); |
@@ -27,12 +27,12 @@ function setupVideo(thumb, url) { | |||
video.src = url; | |||
video.loop = true; | |||
video.innerText = "Your browser does not support HTML5 video."; | |||
video.onclick = function(e) { | |||
video.addEventListener("click", function(e) { | |||
if (e.shiftKey) { | |||
unexpand(); | |||
e.preventDefault(); | |||
} | |||
}; | |||
}, false); | |||
videoHide = document.createElement("img"); | |||
videoHide.src = configRoot + "cc/collapse.gif"; | |||
@@ -40,7 +40,7 @@ function setupVideo(thumb, url) { | |||
videoHide.title = "Collapse to thumbnail"; | |||
videoHide.style.verticalAlign = "top"; | |||
videoHide.style.marginRight = "2px"; | |||
videoHide.onclick = unexpand; | |||
videoHide.addEventListener("click", unexpand, false); | |||
videoContainer = document.createElement("div"); | |||
videoContainer.style.whiteSpace = "nowrap"; | |||
@@ -50,7 +50,7 @@ function setupVideo(thumb, url) { | |||
} | |||
} | |||
thumb.onclick = function(e) { | |||
thumb.addEventListener("click", function(e) { | |||
if (setting("videoexpand") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) { | |||
getVideo(); | |||
expanded = true; | |||
@@ -69,11 +69,11 @@ function setupVideo(thumb, url) { | |||
video.muted = setting("videomuted"); | |||
video.controls = true; | |||
video.play(); | |||
return false; | |||
e.preventDefault(); | |||
} | |||
}; | |||
}, false); | |||
thumb.onmouseover = function(e) { | |||
thumb.addEventListener("mouseover", function(e) { | |||
if (setting("videohover")) { | |||
getVideo(); | |||
expanded = false; | |||
@@ -101,12 +101,14 @@ function setupVideo(thumb, url) { | |||
video.controls = false; | |||
video.play(); | |||
} | |||
}; | |||
}, false); | |||
thumb.onmouseout = unhover; | |||
thumb.addEventListener("mouseout", unhover, false); | |||
} | |||
if (window.addEventListener) window.addEventListener("load", function(e) { | |||
document.body.insertBefore(settingsMenu, document.body.firstChild); | |||
var thumbs = document.querySelectorAll("a.file"); | |||
for (var i = 0; i < thumbs.length; i++) { | |||
if (/\.webm$/.test(thumbs[i].pathname)) { | |||
@@ -1,14 +1,21 @@ | |||
<!DOCTYPE html> | |||
<?php | |||
$params = '?v=' . urlencode($_GET['v']) . '&t=' . urlencode($_GET['t']); | |||
$loop = ($_GET['loop'] != "0"); | |||
?><!DOCTYPE html> | |||
<html> | |||
<head> | |||
<meta charset="utf-8"> | |||
<title><?php echo htmlspecialchars($_GET["t"]) ?></title> | |||
<title><?php echo htmlspecialchars($_GET['t']); ?></title> | |||
<link rel="stylesheet" href="playerstyle.css"> | |||
<script src="defaults.js"></script> | |||
<script src="settings.js"></script> | |||
<script src="playersettings.js"></script> | |||
</head> | |||
<body> | |||
<video controls loop src="<?php echo htmlspecialchars($_GET["v"]) ?>"> | |||
<div id="playerheader"> | |||
<a id="loop0" href="<?php echo $params; ?>&loop=0"<?php if (!$loop) echo ' style="font-weight: bold"'; ?>>[play once]</a> | |||
<a id="loop1" href="<?php echo $params; ?>&loop=1"<?php if ($loop) echo ' style="font-weight: bold"'; ?>>[loop]</a> | |||
</div> | |||
<video controls<?php if ($loop) echo ' loop'; ?> src="<?php echo htmlspecialchars($_GET['v']); ?>"> | |||
Your browser does not support HTML5 video. | |||
</video> | |||
</body> | |||
@@ -1,5 +1,25 @@ | |||
if (window.addEventListener) window.addEventListener("load", function(e) { | |||
document.getElementById("playerheader").appendChild(settingsMenu); | |||
var video = document.getElementsByTagName("video")[0]; | |||
var loopLinks = [document.getElementById("loop0"), document.getElementById("loop1")]; | |||
function setupLoopLink(i) { | |||
loopLinks[i].addEventListener("click", function(e) { | |||
video.loop = (i != 0); | |||
if (i == 1 && video.currentTime >= video.duration) { | |||
video.currentTime = 0; | |||
} | |||
video.play(); | |||
loopLinks[i].style.fontWeight = "bold"; | |||
loopLinks[1-i].style.fontWeight = "inherit"; | |||
e.preventDefault(); | |||
}, false); | |||
} | |||
for (var i = 0; i < 2; i++) { | |||
setupLoopLink(i); | |||
} | |||
video.muted = setting("videomuted"); | |||
video.play(); | |||
}, false); |
@@ -7,3 +7,13 @@ video { | |||
margin-left: auto; | |||
margin-right: auto; | |||
} | |||
#playerheader { | |||
text-align: right; | |||
} | |||
#playerheader a { | |||
color: white; | |||
text-decoration: none; | |||
} | |||
span.settings { | |||
position: relative; | |||
} |
@@ -93,7 +93,7 @@ | |||
</p> | |||
<a href=" | |||
{% if post.file|extension == 'webm' %} | |||
{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&t={{ post.filename|e('url') }} | |||
{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&t={{ post.filename|e('url') }}&loop=1 | |||
{% else %} | |||
{{ config.uri_img }}{{ post.file }} | |||
{% endif %}" target="_blank"{% if post.thumb == 'file' or post.modifiers['is_file'] == '1' or post.filename|extension == 'webm' %} class="file"{% endif %}> | |||
@@ -43,7 +43,7 @@ | |||
</span></p> | |||
<a href=" | |||
{% if post.file|extension == 'webm' %} | |||
{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&t={{ post.filename|e('url') }} | |||
{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&t={{ post.filename|e('url') }}&loop=1 | |||
{% else %} | |||
{{ config.uri_img }}{{ post.file }} | |||
{% endif %}" target="_blank"{% if post.thumb == 'file' or post.modifiers['is_file'] == '1' or post.filename|extension == 'webm' %} class="file"{% endif %}> | |||
@@ -1,12 +1,26 @@ | |||
// 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); | |||
// 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;">' | |||
var settingsMenu = document.createElement("span"); | |||
settingsMenu.className = "settings"; | |||
settingsMenu.innerHTML = '<span>[Settings]</span>' | |||
+ '<div style="display: none; text-align: left; position: absolute; right: 0px; margin-left: -999em;">' | |||
+ '<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>' | |||
+ '<label><input type="checkbox" name="videomuted">Open videos muted</label><br>' | |||
+ '</div>'; | |||
function refreshSettings() { | |||
@@ -18,9 +32,9 @@ function refreshSettings() { | |||
} | |||
function setupCheckbox(box) { | |||
box.onchange = function(e) { | |||
if (box.addEventListener) box.addEventListener("change", function(e) { | |||
localStorage[box.name] = JSON.stringify(box.checked); | |||
}; | |||
}, false); | |||
} | |||
refreshSettings(); | |||
@@ -29,18 +43,14 @@ for (var i = 0; i < settingsItems.length; i++) { | |||
setupCheckbox(settingsItems[i]); | |||
} | |||
settingsMenu.onmouseover = function(e) { | |||
refreshSettings(); | |||
var settingsSections = settingsMenu.getElementsByTagName("div"); | |||
settingsSections[0].style.fontWeight = "bold"; | |||
settingsSections[1].style.display = "block"; | |||
}; | |||
settingsMenu.onmouseout = function(e) { | |||
var settingsSections = settingsMenu.getElementsByTagName("div"); | |||
settingsSections[0].style.fontWeight = "normal"; | |||
settingsSections[1].style.display = "none"; | |||
}; | |||
if (window.addEventListener) window.addEventListener("load", function(e) { | |||
document.body.insertBefore(settingsMenu, document.body.firstChild); | |||
}, false); | |||
if (settingsMenu.addEventListener) { | |||
settingsMenu.addEventListener("mouseover", function(e) { | |||
refreshSettings(); | |||
settingsMenu.getElementsByTagName("span")[0].style.fontWeight = "bold"; | |||
settingsMenu.getElementsByTagName("div")[0].style.display = "block"; | |||
}, false); | |||
settingsMenu.addEventListener("mouseout", function(e) { | |||
settingsMenu.getElementsByTagName("span")[0].style.fontWeight = "normal"; | |||
settingsMenu.getElementsByTagName("div")[0].style.display = "none"; | |||
}, false); | |||
} |