Merge pull request #15 from fredhohman/mobile-videos

Teaser video on mobile, video poster frame on mobile, details illustration compression #13
distillpub · Aug 28, 2020 · 2600e73 · 2600e73
2 parents 98c7a28 + a02bb07
commit 2600e73
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 19 deletions.
diff --git a/src/diagrams/details-illustration.svelte b/src/diagrams/details-illustration.svelte
@@ -166,12 +166,12 @@
         justify-content: space-between;
     }
 
-    .ref {
+    /* .ref {
 		font-size: 0.8em;
 		line-height: 1.5em;
         color: var(--gray);
         padding-bottom: 5px;
-    }
+    } */
 
     #caption-wrapper {
         display: flex;
@@ -208,7 +208,6 @@
         opacity: 0;
     }
 
-
     @media(max-width: 768px) {
 
         #grid-wrapper {
@@ -255,16 +254,16 @@
                     <div class="caption">{annotationDisplay ? annotations[selectedPoint] : noAnnotationMessage}</div>
                 </div>
                 <div>
-                    <div class="ref">Generated images from <d-cite key="karras2018progressive,karras2019style"></d-cite>.</div>
+                    <!-- <div class="ref">Generated images from <d-cite key="karras2018progressive,karras2019style"></d-cite>.</div> -->
                     <div id="thumbnail-wrapper">
-                        <div on:click={() => changeSelectedImage(1)}><img class={selectedImage === 1 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-1.png" alt="" /></div>
-                        <div on:click={() => changeSelectedImage(2)}><img class={selectedImage === 2 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-2.png" alt="" /></div>
-                        <div on:click={() => changeSelectedImage(3)}><img class={selectedImage === 3 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-3.png" alt="" /></div>
-                        <div on:click={() => changeSelectedImage(4)}><img class={selectedImage === 4 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-4.png" alt="" /></div>
+                        <div on:click={() => changeSelectedImage(1)}><img class={selectedImage === 1 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-1.jpg" alt="" /></div>
+                        <div on:click={() => changeSelectedImage(2)}><img class={selectedImage === 2 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-2.jpg" alt="" /></div>
+                        <div on:click={() => changeSelectedImage(3)}><img class={selectedImage === 3 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-3.jpg" alt="" /></div>
+                        <div on:click={() => changeSelectedImage(4)}><img class={selectedImage === 4 ? "thumbnail-selected thumbnail" : "thumbnail"} src="images/fake-images/fake-image-4.jpg" alt="" /></div>
                     </div>
                 </div>
             </div>
         </div>
     </div>
-    <figcaption style="grid-column: text;"><a class="figure-number" href="#details=illustration">6</a>: Choose between 1 of 4 machine-generated images and brush over the circle callouts to display a short message about each region.</figcaption>
-</figure>
+    <figcaption style="grid-column: text;"><a class="figure-number" href="#details=illustration">6</a>: Choose between 1 of 4 machine-generated images and brush over the circle callouts to display a short message about each region. Generated images from <d-cite key="karras2018progressive,karras2019style"></d-cite>.</figcaption>
+</figure>
diff --git a/src/diagrams/intersection-observer.svelte b/src/diagrams/intersection-observer.svelte
@@ -2,8 +2,8 @@
   import { onMount } from 'svelte';
 
   export let once = false;
-  export let top = 0;
-  export let bottom = 0;
+  export let top = 250;
+  export let bottom = 250;
   export let left = 0;
   export let right = 0;
 

diff --git a/src/diagrams/video-example.svelte b/src/diagrams/video-example.svelte
@@ -181,13 +181,13 @@
         <IntersectionObserver once={true} let:intersecting={intersecting}>
             {#if intersecting}
                 {#if mounted && (shortVideo === true && !isMobile)}
-                        <video class="paused" bind:this={video} autoplay controls playsinline muted loop>
-                            <source src={example.teaser} type="video/mp4">
-                            Your browser does not support HTML5 video.
-                        </video>
+                    <video class="paused" bind:this={video} autoplay controls playsinline muted loop>
+                        <source src={example.teaser} type="video/mp4">
+                        Your browser does not support HTML5 video.
+                    </video>
                 {:else if mounted && (shortVideo === false || isMobile)}
-                    <video class="paused" bind:this={video} autoplay={!isMobile} controls playsinline muted>
-                        <source src={example.video} type="video/mp4">
+                    <video class="paused" bind:this={video} autoplay={!isMobile} controls playsinline muted poster={example.poster} preload="meta">
+                        <source src={example.teaser} type="video/mp4">
                         Your browser does not support HTML5 video.
                     </video>
                 {/if}

diff --git a/src/diagrams/video-examples.json b/src/diagrams/video-examples.json
@@ -6,6 +6,7 @@
         "url": "https://www.nytimes.com/interactive/2018/03/19/upshot/race-class-white-and-black-men.html",
         "teaser": "videos/1-720p-short.m4v",
         "video": "videos/1-720p.m4v",
+        "poster": "videos/1-poster.png",
         "bibtex": "badger2018extensive"
     },
     {
@@ -15,6 +16,7 @@
         "url": "https://www.wired.com/2009/07/cutthroat-capitalism-the-game/",
         "teaser": "videos/2-720p-short.m4v",
         "video": "videos/2-720p.m4v",
+        "poster": "videos/2-poster.png",
         "bibtex": "webworks2009cutthroat"
     },
     {
@@ -24,6 +26,7 @@
         "url": "https://design.google/library/designing-and-learning-teachable-machine/",
         "teaser": "videos/3-720p-short.m4v",
         "video": "videos/3-720p.m4v",
+        "poster": "videos/3-poster.png",
         "bibtex": "barron2018designing"
     },
     {
@@ -33,6 +36,7 @@
         "url": "https://eater.net/quaternions",
         "teaser": "videos/4-720p-short.m4v",
         "video": "videos/4-720p.m4v",
+        "poster": "videos/4-poster.png",
         "bibtex": "sanderson2018visualizing"
     },
     {
@@ -42,6 +46,7 @@
         "url": "https://pudding.cool/2019/02/gyllenhaal/",
         "teaser": "videos/5-720p-short.m4v",
         "video": "videos/5-720p.m4v",
+        "poster": "videos/5-poster.png",
         "bibtex": "goldenberg2019you"
     },
     {
@@ -51,6 +56,7 @@
         "url": "https://ncase.me/remember/",
         "teaser": "videos/6-720p-short.m4v",
         "video": "videos/6-720p.m4v",
+        "poster": "videos/6-poster.png",
         "bibtex": "case2014how"
     },
     {
@@ -60,6 +66,7 @@
         "url": "https://www.nytimes.com/interactive/2018/08/30/climate/how-much-hotter-is-your-hometown.html",
         "teaser": "videos/7-720p-short.m4v",
         "video": "videos/7-720p.m4v",
+        "poster": "videos/7-poster.png",
         "bibtex": "popovich2018how"
     },
     {
@@ -69,6 +76,7 @@
         "url": "https://quantum.country/",
         "teaser": "videos/8-720p-short.m4v",
         "video": "videos/8-720p.m4v",
+        "poster": "videos/8-poster.png",
         "bibtex": "matuschak2019quantum"
     }
 ]
diff --git a/src/index.ejs b/src/index.ejs
@@ -257,7 +257,7 @@
     <h4>Illustration</h4>
 
     <p>
-      Details-on-demand is also used in illustrations, interactive textbooks, and museum exhibits, where highlighted segments of a figure can be selected to display additional information about the particular segment. For example, in "How does the eye work?" readers can select segments of an anatomical diagram of the human eye to learn more about specific regions, e.g., rods and cones <d-cite key="ala2018how"></d-cite>. Another example is "Earth Primer," an interactive textbook on tablets that allows readers to inspect the Earth's interior, surface, and biomes <d-cite key="gingold2015earth"></d-cite>. Each illustration contains segments the reader can tap to learn and explore in depth. <a class="figure-number-text" href="#details-illustration">6</a> demonstrates this by pointing out specific regions in machine-generated imagery to help people spot fake images.
+      Details-on-demand is also used in illustrations, interactive textbooks, and museum exhibits, where highlighted segments of a figure can be selected to display additional information about the particular segment. For example, in "How does the eye work?" readers can select segments of an anatomical diagram of the human eye to learn more about specific regions, e.g., rods and cones <d-cite key="ala2018how"></d-cite>. Another example is "Earth Primer," an interactive textbook on tablets that allows readers to inspect the Earth's interior, surface, and biomes <d-cite key="gingold2015earth"></d-cite>. Each illustration contains segments the reader can tap to learn and explore in depth. <a class="figure-number-text" href="#details-illustration">6</a> demonstrates this by pointing out specific regions in machine-generated imagery <d-cite key="karras2018progressive,karras2019style"></d-cite> to help people spot fake images.
     </p>
 
     <d-figure id="details-illustration" class="subgrid"></d-figure>