Adds a little fake scrubber for deep video links

zachleat · zachleat · commit 47ba3f154343 · 2021-03-16T17:00:24.000-05:00
diff --git a/src/css/tailwind.css b/src/css/tailwind.css
@@ -451,6 +451,20 @@ details[open] .summary-swap-open {
 .js .jamstacktv-js {
   display: none;
 }
+.jamstacktv-scrubber {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  height: 1em;
+  border-radius: 0 0 1em 1em;
+  overflow: hidden;
+}
+.jamstacktv-scrubber > div {
+  height: 4px;
+  background-color: red;
+}
 /* purgecss end ignore */
 
 @tailwind utilities;
diff --git a/src/site/_includes/layouts/base.njk b/src/site/_includes/layouts/base.njk
@@ -31,9 +31,7 @@ ogimage: "/img/og/default-og-image.png"
     <meta property="twitter:image" content="{{ netlify.deployUrl }}{{ ogimage }}">
     <meta name="google-site-verification" content="i5IheizQ6X_M4jNqb_b7vbJrT34i_gvEg8Gxkq9IY_w" />
     <meta name="google-site-verification" content="WDIQ_1X8K7XIpPJ5G1Z8KnOqdSeYetPQB4EgoTLfIsc" />
-    <script>
-    if("classList" in document.documentElement) document.documentElement.classList.add("js");
-    </script>
+    <script type="module">document.documentElement.classList.add("js");</script>
   </head>
   <body class="bg-blue-900 text-blue-100 leading-relaxed antialiased">
     <svg width="0" height="0" aria-hidden="true" style="position: absolute;">
diff --git a/src/site/_includes/search-js.njk b/src/site/_includes/search-js.njk
@@ -1,6 +1,6 @@
-<script src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
-<script src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.8.3/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
-<script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/algoliasearch@4.5.1/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
+<script type="module" src="https://cdn.jsdelivr.net/npm/instantsearch.js@4.8.3/dist/instantsearch.production.min.js" integrity="sha256-LAGhRRdtVoD6RLo2qDQsU2mp+XVSciKRC8XPOBWmofM=" crossorigin="anonymous"></script>
+<script type="module">
 const searchClient = algoliasearch('{{ algolia.appId }}', '{{ algolia.searchOnlyApiKey }}');
 
 const search = instantsearch({
@@ -9,7 +9,9 @@ const search = instantsearch({
 });
 
 {% raw %}
-function pad(num) { return num < 10 ? `0${num}` : num; }
+function pad(num) {
+  return num < 10 ? `0${num}` : num;
+}
 
 function getDurationString(duration) {
   let secondsInOne = {
@@ -51,6 +53,8 @@ search.addWidgets([
 
         if(start > 10) { // only show for deep links > 10 seconds
           obj.displayStartInline = `<span class="jamstacktv-time"><b></b><b></b>${getDurationString(start)} of</span>`;
+          let scrubberWidth = Math.floor( 100 * item.caption.start / item.video.duration );
+          obj.scrubberHtml = `<div class="jamstacktv-scrubber"><div style="width: ${scrubberWidth}%"></div></div>`;
           //obj._highlightResult.caption.content = `…${obj._highlightResult.caption.content}`;
         } else {
           obj.wrapperClass = "jamstacktv-no-skip";
@@ -64,6 +68,7 @@ search.addWidgets([
           <div class="aspect-ratio-youtube relative jamstacktv-card">
             <img src="{{ video.thumbnails.medium }}" alt="{{ video.title }}" class="jamstacktv-img absolute top-0 card-shadow bg-gradient-card-sunrise group-hover:card-shadow-sunrise">
             <span class="jamstacktv-duration">{{{ displayStartInline }}}{{ displayDuration }}</span>
+            {{{ scrubberHtml }}}
           </div>
           <div class="col-span-2 jamstacktv-item {{ wrapperClass }}">
             <div class="jamstacktv-meta mb-1">
