tinker

2 files changed, 56 insertions, 34 deletions

diff --git a/local.css b/local.css
index 1240fe8f..56834706 100644
--- a/local.css
+++ b/local.css
@@ -132,3 +132,8 @@ svg a.highlight rect { stroke-width: 3px }
 a.highlight { background-color: yellow }
 
 .transcript-heading { font-weight: bold }
+
+.transcript .sticky-video { display: none }
+@media only screen and (min-width: 64.063em) {
+		.transcript .sticky-video { position: sticky; top: 0 }
+}
diff --git a/templates/page.tmpl b/templates/page.tmpl
index f74e9e2b..05fade46 100644
--- a/templates/page.tmpl
+++ b/templates/page.tmpl
@@ -393,49 +393,66 @@ Last edited <TMPL_VAR MTIME>
    }
    elem.parentNode.replaceChild(list, elem);
  }
-  
-  document.querySelectorAll('pre.chapters').forEach(displayChapters);
+
+ document.querySelectorAll('pre.chapters').forEach(displayChapters);
 
  var video = document.querySelector('video.reload');
-if (video) {
-  var myVar = setInterval(reloadAsNeeded, 1000);
-  var oldTime = '';
-  function reloadAsNeeded() {
-    if ((video.paused != true && (video.currentTime - oldTime) == 0 && video.currentTime != 0)) {
-      var source = video.querySelector('source');
-      var oldVideo = source.src;
-      source.src = '';
-      source.src = oldVideo;
-      video.load();
-      video.play();
-    }
-    oldTime = video.currentTime;
-  };
-}
+ if (video) {
+   var myVar = setInterval(reloadAsNeeded, 1000);
+   var oldTime = '';
+   function reloadAsNeeded() {
+     if ((video.paused != true && (video.currentTime - oldTime) == 0 && video.currentTime != 0)) {
+       var source = video.querySelector('source');
+       var oldVideo = source.src;
+       source.src = '';
+       source.src = oldVideo;
+       video.load();
+       video.play();
+     }
+     oldTime = video.currentTime;
+   };
+ }
+
+ /* videoType: mainVideo, qanda */
+ function addStickyVideo(videoType) {
+	 const transcriptDiv = document.querySelector('.transcript-' + videoType);
+	 const video = document.querySelector('.vid.' + videoType);
+	 if (!video || !transcriptDiv) return;
+	 if (transcriptDiv.querySelector('video')) return; // already has it
+	 // TODO: Make a copy of the video and place it at the start of the btranscript div, positioned to the left, and sticky, but only on large screens.
+	 const videoCopy = video.cloneNode(true);
+	 transcriptDiv.prepend(videoCopy);
+	 videoCopy.classList.add('sticky-video');
+	 // TODO: fix the ID
 
+ }
 
 
 
  // @license-end
  // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0
-	// Copyright (c) 2023 Sacha Chua - CC0 Public Domain
-	function highlightTalks() {
-		// highlight any talk mentioned in the highlight URL parameter
-		var params = new URLSearchParams(window.location.search);
-		if (!params.get('highlight')) return;
-		var talks = params.get('highlight').split(',').filter(function(o) { return o.match(/^[-a-z0-9]+$/); });
-		var regexp = new RegExp('/talks/(' + talks.join('|') + ')/?$');
-		document.querySelectorAll('a[href]').forEach(function(link) {
-			console.debug(link.getAttribute('href'), link.getAttribute('href').match(regexp));
-			if (link.getAttribute('href').match(regexp)) {
-				console.debug(link);
-				link.classList.add('highlight');
-			}
-		});
-	}
+ // Copyright (c) 2023 Sacha Chua - CC0 Public Domain
+ function highlightTalks() {
+	 // highlight any talk mentioned in the highlight URL parameter
+	 var params = new URLSearchParams(window.location.search);
+	 if (!params.get('highlight')) return;
+	 var talks = params.get('highlight').split(',').filter(function(o) { return o.match(/^[-a-z0-9]+$/); });
+	 var regexp = new RegExp('/talks/(' + talks.join('|') + ')/?$');
+	 document.querySelectorAll('a[href]').forEach(function(link) {
+		 console.debug(link.getAttribute('href'), link.getAttribute('href').match(regexp));
+		 if (link.getAttribute('href').match(regexp)) {
+			 console.debug(link);
+			 link.classList.add('highlight');
+		 }
+	 });
+ }
 
-	addEventListener('DOMContentLoaded', highlightTalks);
-	// @license-end
+ addEventListener('DOMContentLoaded', highlightTalks);
+ addEventListener('DOMContentLoaded', function() {
+	 addStickyVideo('mainVideo');
+	 addStickyVideo('qanda');
+ });
+ // @license-end
 </script>
 </body>
 </html>