From 8119058ac9d9e27197f6c8d2e837979b75828a71 Mon Sep 17 00:00:00 2001
From: ccd0 <admin@containerchan.org>
Date: Sun, 10 Nov 2013 04:57:45 -0800
Subject: [PATCH] loop setting on player page, various other changes

---
 README.md         | 14 +++++++++---
 defaults.js       | 14 ------------
 expandvideo.js    | 20 +++++++++--------
 player.php        | 15 +++++++++----
 playersettings.js | 20 +++++++++++++++++
 playerstyle.css   | 10 +++++++++
 post_reply.html   |  2 +-
 post_thread.html  |  2 +-
 settings.js       | 56 ++++++++++++++++++++++++++++-------------------
 9 files changed, 98 insertions(+), 55 deletions(-)
 delete mode 100644 defaults.js

diff --git a/README.md b/README.md
index 2039b318..a00e625f 100644
--- a/README.md
+++ b/README.md
@@ -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;
+    }
diff --git a/defaults.js b/defaults.js
deleted file mode 100644
index 71dade12..00000000
--- a/defaults.js
+++ /dev/null
@@ -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);
diff --git a/expandvideo.js b/expandvideo.js
index 26979bea..260ff17d 100644
--- a/expandvideo.js
+++ b/expandvideo.js
@@ -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)) {
diff --git a/player.php b/player.php
index 150a1087..cd0446e2 100644
--- a/player.php
+++ b/player.php
@@ -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; ?>&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.
     </video>
 </body>
diff --git a/playersettings.js b/playersettings.js
index e6099ff4..8c508fd7 100644
--- a/playersettings.js
+++ b/playersettings.js
@@ -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);
diff --git a/playerstyle.css b/playerstyle.css
index d2bba832..44d73757 100644
--- a/playerstyle.css
+++ b/playerstyle.css
@@ -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;
+}
diff --git a/post_reply.html b/post_reply.html
index aaadeefd..876ee3a9 100644
--- a/post_reply.html
+++ b/post_reply.html
@@ -93,7 +93,7 @@
 </p>
 	<a href="
 		{% 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 %}
 			{{ 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 %}>
diff --git a/post_thread.html b/post_thread.html
index 1e9c0f27..1ea4ccba 100644
--- a/post_thread.html
+++ b/post_thread.html
@@ -43,7 +43,7 @@
 	</span></p>
 <a href="
 	{% 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 %}
 		{{ 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 %}>
diff --git a/settings.js b/settings.js
index 1a718da9..54765190 100644
--- a/settings.js
+++ b/settings.js
@@ -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);
+}