Add a mode for presentation viewer with no video/slides sync but still slide-based navigation

Useful for one of the new presentations

Author: dontcallmedom

_layouts/talk.html

@@ -52,11 +52,20 @@ <h2>{{page.title}} - by {{page.author}}{% if page.affiliation %} ({{page.affilia
     {% assign path = "../" %}
     <main>
       {% include related-issues/{{shortname}}.html %}
-    <form id="form">
-        {% if page.slidesurl  %}
+      {% assign videoSync = false %}
+      {% if page.slidesurl %}
+      {% assign videoSync = true %}
+      {% endif %}
+      {% if page.nosync == true%}
+      {% assign videoSync = false %}
+      {% endif %}
+
+    <form id="form" {% if videoSync  %}{% else if page.slidesurl %}class="videonav"{% endif %}>
+        {% if videoSync  %}
         <input type="checkbox" name="sync" id="sync"><label for="sync" class="button">Sync video and hide transcript
         <a href="https://www.w3.org/2020/05/AC/talk-help.html"  rel=help title="Help" class="picto im-question"></a></label>&nbsp;
-
+        {% endif %}
+        {% if page.slidesurl %}
         <a class="picto im-angle-up button" id="align" href="#align" title="Align to top of window"></a>&nbsp;
         <span id="prevnext" aria-label="Slide navigation controls" role="navigation">
           <a id="firstslide" href="#firstslide" title="First slide" class="button" role="button">1st</a>
@@ -78,10 +87,16 @@ <h2>{{page.title}} - by {{page.author}}{% if page.affiliation %} ({{page.affilia
   "uploadDate": "2020-08-17T13:00:00+02:00",
   "duration": "{{page.duration_so}}",
   "embedUrl": "{{page.videourl}}"}
-</script>
-
-          <div {% if page.slidesurl %}id="video1"{%endif%}><iframe id="video" title="video of ‘{{page.title}} by {{page.author}}" src="{{page.videourl}}" allow="accelerometer; autoplay; encrypted-media;
-          picture-in-picture" allowfullscreen="" {% if page.slidesurl %}width="640" height="360"{% else %}height=400 class=fw {% endif %} frameborder="0"></iframe></div>
+      </script>
+          <div {% if videoSync %}id="video1"{%endif%}><iframe id="video" title="video of ‘{{page.title}} by {{page.author}}" src="{{page.videourl}}" allow="accelerometer; autoplay; encrypted-media;
+                                                                                                                                                            picture-in-picture" allowfullscreen="" {% if videoSync %}width="640" height="360"{% else %}height=400 class=fw {% endif %} frameborder="0"></iframe></div>
+          {% if page.nosync == true %}
+      <p id=caption>
+        <output id=cue aria-live=off>
+          <noscript>(Synchronization requires JavaScript)</noscript>
+        </output>
+      </p>
+      {% endif %}
         {% if page.slidesurl %}
           <output id="slidenr" aria-live="polite"><a href="#start">Slide 1 of 40</a></output>
 

_tools/generate_talk_pages.js

@@ -65,7 +65,8 @@ shortname: ${shortname}
 thumbnailurl: ${talk.thumbnail}
 videourl: ${talk.video}
 slidesurl: ${slidesurl}
-prevlink: ${prevlink}
+` + (talk.nosync ? `nosync: ${talk.nosync}\n` : '') +
+`prevlink: ${prevlink}
 prevtitle: "${prevtitle}"
 nextlink: ${nextlink}
 nexttitle: "${nexttitle}"

presentation-viewer.css

@@ -98,9 +98,9 @@
         visibility: hidden}
       #sync:checked ~ #player .slide.active {position: relative;
         visibility: visible}
-      #sync:checked ~ #prevnext {display: inline}
+      .videonav #prevnext, #sync:checked ~ #prevnext {display: inline}
       #sync:checked ~ #player #slides > *:not(.slide) {display: none}
-      #sync:checked ~ #player #caption {display: block}
+      .videonav #player #caption, #sync:checked ~ #player #caption {display: block}
 
       /* ... and only the active elements of incremental display. */
       #sync:checked ~ #player .next {visibility: hidden}

presentation-viewer.js

@@ -77,6 +77,10 @@
   // activate -- deactivate the current element and activate the new one
   function activate(new_index)
   {
+    if (!syncelts[current]) {
+      announce(new_index);
+      return;
+    }
     if (new_index < current) {
 
       // Deactivate the old current element and activate the new.