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

loop setting on player page, various other changes

Browse Source
This commit is contained in:
ccd0 2013-11-10 04:57:45 -08:00
parent 2a770f27d1
commit 8119058ac9
9 changed files with 98 additions and 55 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
README.md
View File

@ -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: 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';
event_handler('post', 'postHandler');
And add this to stylesheets/style.css: 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;
}

14
defaults.js
View File

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

20
expandvideo.js
View File

@ -27,12 +27,12 @@ function setupVideo(thumb, url) {
video.src = url; video.src = url;
video.loop = true; video.loop = true;
video.innerText = "Your browser does not support HTML5 video."; video.innerText = "Your browser does not support HTML5 video.";
video.onclick = function(e) { video.addEventListener("click", function(e) {
if (e.shiftKey) { if (e.shiftKey) {
unexpand(); unexpand();
e.preventDefault(); e.preventDefault();
} }
}; }, false);
videoHide = document.createElement("img"); videoHide = document.createElement("img");
videoHide.src = configRoot + "cc/collapse.gif"; videoHide.src = configRoot + "cc/collapse.gif";
@ -40,7 +40,7 @@ function setupVideo(thumb, url) {
videoHide.title = "Collapse to thumbnail"; videoHide.title = "Collapse to thumbnail";
videoHide.style.verticalAlign = "top"; videoHide.style.verticalAlign = "top";
videoHide.style.marginRight = "2px"; videoHide.style.marginRight = "2px";
videoHide.onclick = unexpand; videoHide.addEventListener("click", unexpand, false);
videoContainer = document.createElement("div"); videoContainer = document.createElement("div");
videoContainer.style.whiteSpace = "nowrap"; 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) { if (setting("videoexpand") && !e.shiftKey && !e.ctrlKey && !e.altKey && !e.metaKey) {
getVideo(); getVideo();
expanded = true; expanded = true;
@ -69,11 +69,11 @@ function setupVideo(thumb, url) {
video.muted = setting("videomuted"); video.muted = setting("videomuted");
video.controls = true; video.controls = true;
video.play(); video.play();
return false; e.preventDefault();
} }
}; }, false);
thumb.onmouseover = function(e) { thumb.addEventListener("mouseover", function(e) {
if (setting("videohover")) { if (setting("videohover")) {
getVideo(); getVideo();
expanded = false; expanded = false;
@ -101,12 +101,14 @@ function setupVideo(thumb, url) {
video.controls = false; video.controls = false;
video.play(); video.play();
} }
}; }, false);
thumb.onmouseout = unhover; thumb.addEventListener("mouseout", unhover, false);
} }
if (window.addEventListener) window.addEventListener("load", function(e) { if (window.addEventListener) window.addEventListener("load", function(e) {
document.body.insertBefore(settingsMenu, 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)) {

15
player.php
View File

@ -1,14 +1,21 @@
<!DOCTYPE html> <?php
$params = '?v=' . urlencode($_GET['v']) . '&t=' . urlencode($_GET['t']);
$loop = ($_GET['loop'] != "0");
?><!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<title><?php echo htmlspecialchars($_GET["t"]) ?></title> <title><?php echo htmlspecialchars($_GET['t']); ?></title>
<link rel="stylesheet" href="playerstyle.css"> <link rel="stylesheet" href="playerstyle.css">
<script src="defaults.js"></script> <script src="settings.js"></script>
<script src="playersettings.js"></script> <script src="playersettings.js"></script>
</head> </head>
<body> <body>
<video controls loop src="<?php echo htmlspecialchars($_GET["v"]) ?>"> <div id="playerheader">
<a id="loop0" href="<?php echo $params; ?>&amp;loop=0"<?php if (!$loop) echo ' style="font-weight: bold"'; ?>>[play once]</a>
<a id="loop1" href="<?php echo $params; ?>&amp;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. Your browser does not support HTML5 video.
</video> </video>
</body> </body>

20
playersettings.js
View File

@ -1,5 +1,25 @@
if (window.addEventListener) window.addEventListener("load", function(e) { if (window.addEventListener) window.addEventListener("load", function(e) {
document.getElementById("playerheader").appendChild(settingsMenu);
var video = document.getElementsByTagName("video")[0]; 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.muted = setting("videomuted");
video.play(); video.play();
}, false); }, false);

10
playerstyle.css
View File

@ -7,3 +7,13 @@ video {
margin-left: auto; margin-left: auto;
margin-right: auto; margin-right: auto;
} }
#playerheader {
text-align: right;
}
#playerheader a {
color: white;
text-decoration: none;
}
span.settings {
position: relative;
}

2
post_reply.html
View File

@ -93,7 +93,7 @@
</p> </p>
<a href=" <a href="
{% if post.file|extension == 'webm' %} {% if post.file|extension == 'webm' %}
{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&amp;t={{ post.filename|e('url') }} {{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&amp;t={{ post.filename|e('url') }}&amp;loop=1
{% else %} {% else %}
{{ config.uri_img }}{{ post.file }} {{ 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 %}> {% endif %}" target="_blank"{% if post.thumb == 'file' or post.modifiers['is_file'] == '1' or post.filename|extension == 'webm' %} class="file"{% endif %}>

2
post_thread.html
View File

@ -43,7 +43,7 @@
</span></p> </span></p>
<a href=" <a href="
{% if post.file|extension == 'webm' %} {% if post.file|extension == 'webm' %}
{{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&amp;t={{ post.filename|e('url') }} {{ config.root }}cc/player.php?v={{ config.uri_img }}{{ post.file }}&amp;t={{ post.filename|e('url') }}&amp;loop=1
{% else %} {% else %}
{{ config.uri_img }}{{ post.file }} {{ 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 %}> {% endif %}" target="_blank"{% if post.thumb == 'file' or post.modifiers['is_file'] == '1' or post.filename|extension == 'webm' %} class="file"{% endif %}>

56
settings.js
View File

@ -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 // Create settings menu
var settingsMenu = document.createElement("div"); var settingsMenu = document.createElement("span");
settingsMenu.style.position = "absolute"; settingsMenu.className = "settings";
settingsMenu.style.top = "1em"; settingsMenu.innerHTML = '<span>[Settings]</span>'
settingsMenu.style.right = "1em"; + '<div style="display: none; text-align: left; position: absolute; right: 0px; margin-left: -999em;">'
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="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">Open videos muted</label><br>'
+ '</div>'; + '</div>';
function refreshSettings() { function refreshSettings() {
@ -18,9 +32,9 @@ function refreshSettings() {
} }
function setupCheckbox(box) { function setupCheckbox(box) {
box.onchange = function(e) { if (box.addEventListener) box.addEventListener("change", function(e) {
localStorage[box.name] = JSON.stringify(box.checked); localStorage[box.name] = JSON.stringify(box.checked);
}; }, false);
} }
refreshSettings(); refreshSettings();
@ -29,18 +43,14 @@ for (var i = 0; i < settingsItems.length; i++) {
setupCheckbox(settingsItems[i]); setupCheckbox(settingsItems[i]);
} }
settingsMenu.onmouseover = function(e) { if (settingsMenu.addEventListener) {
refreshSettings(); settingsMenu.addEventListener("mouseover", function(e) {
var settingsSections = settingsMenu.getElementsByTagName("div"); refreshSettings();
settingsSections[0].style.fontWeight = "bold"; settingsMenu.getElementsByTagName("span")[0].style.fontWeight = "bold";
settingsSections[1].style.display = "block"; settingsMenu.getElementsByTagName("div")[0].style.display = "block";
}; }, false);
settingsMenu.onmouseout = function(e) { settingsMenu.addEventListener("mouseout", function(e) {
var settingsSections = settingsMenu.getElementsByTagName("div"); settingsMenu.getElementsByTagName("span")[0].style.fontWeight = "normal";
settingsSections[0].style.fontWeight = "normal"; settingsMenu.getElementsByTagName("div")[0].style.display = "none";
settingsSections[1].style.display = "none"; }, false);
}; }
if (window.addEventListener) window.addEventListener("load", function(e) {
document.body.insertBefore(settingsMenu, document.body.firstChild);
}, false);