Added media playback speed controls

* Added global page playback rate after every video or audio HTML5 element
* Added media-playback.{css,js} to control behaviour and style
* Added html-after-content for cargo doc command

Signed-off-by: Lewis Cowles <[email protected]>

Makefile

@@ -23,7 +23,7 @@ test: $(SRC)
 	cargo test
 
 modules: $(SRC)
-	cargo doc
+	env RUSTDOCFLAGS="--html-after-content src/includes/media-playback-speed.html" cargo doc
 
 # Fancy landing page components.
 landing: $(LANDING) target_dir

resources/media-playback.css

@@ -0,0 +1,12 @@
+.playback-rate-controls ul {
+    margin: 0;
+    padding: 0;
+    list-style: none;
+    text-align: center;
+}
+.playback-rate-controls li {
+    display: inline;
+}
+.playback-rate-controls li:not(:last-of-type)::after {
+    content: " | ";
+}

resources/media-playback.js

@@ -0,0 +1,25 @@
+function setPlaybackSpeed(speed) {
+        [].slice.call(document.querySelectorAll('audio,video')).map(
+                function(e, idx) {
+                        e.playbackRate = speed;
+                }
+        );
+}
+(function() {
+        [].slice.call(document.querySelectorAll('audio,video')).map(
+                function(e, idx) {
+                        let controls = document.createElement('div');
+                        controls.className = 'playback-rate-controls';
+                        let list = document.createElement('ul');
+                        list.innerHTML += '<li><a href="#" onclick="setPlaybackSpeed(0.5)">0.5⨉</a></li>';
+                        list.innerHTML += '<li><a href="#" onclick="setPlaybackSpeed(1)">1⨉</a></li>';
+                        list.innerHTML += '<li><a href="#" onclick="setPlaybackSpeed(1.25)">1.25⨉</a></li>';
+                        list.innerHTML += '<li><a href="#" onclick="setPlaybackSpeed(1.5)">1.5⨉</a></li>';
+                        list.innerHTML += '<li><a href="#" onclick="setPlaybackSpeed(1.75)">1.75⨉</a></li>';
+                        list.innerHTML += '<li><a href="#" onclick="setPlaybackSpeed(2)">2⨉</a></li>';
+                        controls.appendChild(list);
+                        e.parentNode.insertBefore(controls, e.nextSibling);
+                }
+        );
+})();
+

src/includes/media-playback-speed.html

@@ -0,0 +1,3 @@
+<link rel="stylesheet" href="/media-playback.css">
+<script type="text/javascript" src="/media-playback.js" defer></script>
+