Switch to video player instead of GIF

2022-12-21 13:26:39 -08:00 · 2022-12-21 13:26:39 -08:00 · aac1fbfd1d
parent 5a90de4ef5
commit aac1fbfd1d
13 changed files with 147 additions and 12 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -18,6 +18,8 @@
 				"@sveltejs/kit": "^1.0.0",
 				"@typescript-eslint/eslint-plugin": "^5.45.0",
 				"@typescript-eslint/parser": "^5.45.0",
+				"@vime/core": "^5.4.0",
+				"@vime/svelte": "^5.4.0",
 				"bulma": "^0.9.4",
 				"eslint": "^8.28.0",
 				"eslint-config-prettier": "^8.5.0",
@ -663,6 +665,19 @@
 				}
 			}
 		},
+		"node_modules/@stencil/core": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
+			"integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+			"dev": true,
+			"bin": {
+				"stencil": "bin/stencil"
+			},
+			"engines": {
+				"node": ">=12.10.0",
+				"npm": ">=6.0.0"
+			}
+		},
 		"node_modules/@sveltejs/adapter-auto": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0.tgz",
@ -755,6 +770,12 @@
 			"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
 			"dev": true
 		},
+		"node_modules/@types/fscreen": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@types/fscreen/-/fscreen-1.0.1.tgz",
+			"integrity": "sha512-hV2d0BreihMGtrg+EdAFOIl/O2EL5vhAheHJUztGE/lPFZIN8ZCpGFL8hCbtyi1CfhKjDRCf47sHjP+FwJ4q0Q==",
+			"dev": true
+		},
 		"node_modules/@types/json-schema": {
 			"version": "7.0.11",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -981,6 +1002,30 @@
 				"url": "https://opencollective.com/typescript-eslint"
 			}
 		},
+		"node_modules/@vime/core": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@vime/core/-/core-5.4.0.tgz",
+			"integrity": "sha512-ZP19/+9RDeX8q0dPGW1Au77/c7hqb8Lsd/4zV0pAsld+op/cYVMoByu5wd6luQ0R6AKwe/mYdNTDatAHZlhHZw==",
+			"dev": true,
+			"dependencies": {
+				"@stencil/core": "2.5.2",
+				"@types/fscreen": "^1.0.1",
+				"fscreen": "^1.2.0",
+				"mitt": "^3.0.0",
+				"stencil-wormhole": "^3.4.1"
+			}
+		},
+		"node_modules/@vime/svelte": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@vime/svelte/-/svelte-5.4.0.tgz",
+			"integrity": "sha512-H12FCt6NDYlNZYFz6gRvJ0d4aI48hIKcqnIMegmvpUh4hS/iddQhEWi6KaW+QxOSqyPcq8JHmQiOfjWX7hLu6Q==",
+			"dev": true,
+			"hasInstallScript": true,
+			"peerDependencies": {
+				"@vime/core": "5.4.0",
+				"svelte": "^3.0.0"
+			}
+		},
 		"node_modules/acorn": {
 			"version": "8.8.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@ -1747,6 +1792,12 @@
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
 			"dev": true
 		},
+		"node_modules/fscreen": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
+			"integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
+			"dev": true
+		},
 		"node_modules/fsevents": {
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -2241,6 +2292,12 @@
 				"url": "https://github.com/sponsors/ljharb"
 			}
 		},
+		"node_modules/mitt": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+			"integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+			"dev": true
+		},
 		"node_modules/mkdirp": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@ -2810,6 +2867,12 @@
 			"deprecated": "Please use @jridgewell/sourcemap-codec instead",
 			"dev": true
 		},
+		"node_modules/stencil-wormhole": {
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/stencil-wormhole/-/stencil-wormhole-3.4.1.tgz",
+			"integrity": "sha512-ppYTcWTJnIl4ZAKwF39LTA9f/ypHfbVefsHdN2hpMQGrR57wt1TieZo9tlCM/r1Y4SFiZ5yz/cjho564C921Xw==",
+			"dev": true
+		},
 		"node_modules/streamsearch": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
@ -3611,6 +3674,12 @@
 				"picomatch": "^2.3.1"
 			}
 		},
+		"@stencil/core": {
+			"version": "2.5.2",
+			"resolved": "https://registry.npmjs.org/@stencil/core/-/core-2.5.2.tgz",
+			"integrity": "sha512-bgjPXkSzzg1WnTgVUm6m5ZzpKt602WmA/QljODAW1xVN40OHJdbGblzF/F6MFzqv2c5Cy30CB41arc8qADIdcQ==",
+			"dev": true
+		},
 		"@sveltejs/adapter-auto": {
 			"version": "1.0.0",
 			"resolved": "https://registry.npmjs.org/@sveltejs/adapter-auto/-/adapter-auto-1.0.0.tgz",
@ -3679,6 +3748,12 @@
 			"integrity": "sha512-WulqXMDUTYAXCjZnk6JtIHPigp55cVtDgDrO2gHRwhyJto21+1zbVCtOYB2L1F9w4qCQ0rOGWBnBe0FNTiEJIQ==",
 			"dev": true
 		},
+		"@types/fscreen": {
+			"version": "1.0.1",
+			"resolved": "https://registry.npmjs.org/@types/fscreen/-/fscreen-1.0.1.tgz",
+			"integrity": "sha512-hV2d0BreihMGtrg+EdAFOIl/O2EL5vhAheHJUztGE/lPFZIN8ZCpGFL8hCbtyi1CfhKjDRCf47sHjP+FwJ4q0Q==",
+			"dev": true
+		},
 		"@types/json-schema": {
 			"version": "7.0.11",
 			"resolved": "https://registry.npmjs.org/@types/json-schema/-/json-schema-7.0.11.tgz",
@ -3816,6 +3891,26 @@
 				"eslint-visitor-keys": "^3.3.0"
 			}
 		},
+		"@vime/core": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@vime/core/-/core-5.4.0.tgz",
+			"integrity": "sha512-ZP19/+9RDeX8q0dPGW1Au77/c7hqb8Lsd/4zV0pAsld+op/cYVMoByu5wd6luQ0R6AKwe/mYdNTDatAHZlhHZw==",
+			"dev": true,
+			"requires": {
+				"@stencil/core": "2.5.2",
+				"@types/fscreen": "^1.0.1",
+				"fscreen": "^1.2.0",
+				"mitt": "^3.0.0",
+				"stencil-wormhole": "^3.4.1"
+			}
+		},
+		"@vime/svelte": {
+			"version": "5.4.0",
+			"resolved": "https://registry.npmjs.org/@vime/svelte/-/svelte-5.4.0.tgz",
+			"integrity": "sha512-H12FCt6NDYlNZYFz6gRvJ0d4aI48hIKcqnIMegmvpUh4hS/iddQhEWi6KaW+QxOSqyPcq8JHmQiOfjWX7hLu6Q==",
+			"dev": true,
+			"requires": {}
+		},
 		"acorn": {
 			"version": "8.8.1",
 			"resolved": "https://registry.npmjs.org/acorn/-/acorn-8.8.1.tgz",
@ -4398,6 +4493,12 @@
 			"integrity": "sha512-OO0pH2lK6a0hZnAdau5ItzHPI6pUlvI7jMVnxUQRtw4owF2wk8lOSabtGDCTP4Ggrg2MbGnWO9X8K1t4+fGMDw==",
 			"dev": true
 		},
+		"fscreen": {
+			"version": "1.2.0",
+			"resolved": "https://registry.npmjs.org/fscreen/-/fscreen-1.2.0.tgz",
+			"integrity": "sha512-hlq4+BU0hlPmwsFjwGGzZ+OZ9N/wq9Ljg/sq3pX+2CD7hrJsX9tJgWWK/wiNTFM212CLHWhicOoqwXyZGGetJg==",
+			"dev": true
+		},
 		"fsevents": {
 			"version": "2.3.2",
 			"resolved": "https://registry.npmjs.org/fsevents/-/fsevents-2.3.2.tgz",
@ -4769,6 +4870,12 @@
 			"integrity": "sha512-bzfL1YUZsP41gmu/qjrEk0Q6i2ix/cVeAhbCbqH9u3zYutS1cLg00qhrD0M2MVdCcx4Sc0UpP2eBWo9rotpq6g==",
 			"dev": true
 		},
+		"mitt": {
+			"version": "3.0.0",
+			"resolved": "https://registry.npmjs.org/mitt/-/mitt-3.0.0.tgz",
+			"integrity": "sha512-7dX2/10ITVyqh4aOSVI9gdape+t9l2/8QxHrFmUXu4EEUpdlxl6RudZUPZoc+zuY2hk1j7XxVroIVIan/pD/SQ==",
+			"dev": true
+		},
 		"mkdirp": {
 			"version": "0.5.6",
 			"resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
@ -5151,6 +5258,12 @@
 			"integrity": "sha512-9NykojV5Uih4lgo5So5dtw+f0JgJX30KCNI8gwhz2J9A15wD0Ml6tjHKwf6fTSa6fAdVBdZeNOs9eJ71qCk8vA==",
 			"dev": true
 		},
+		"stencil-wormhole": {
+			"version": "3.4.1",
+			"resolved": "https://registry.npmjs.org/stencil-wormhole/-/stencil-wormhole-3.4.1.tgz",
+			"integrity": "sha512-ppYTcWTJnIl4ZAKwF39LTA9f/ypHfbVefsHdN2hpMQGrR57wt1TieZo9tlCM/r1Y4SFiZ5yz/cjho564C921Xw==",
+			"dev": true
+		},
 		"streamsearch": {
 			"version": "1.1.0",
 			"resolved": "https://registry.npmjs.org/streamsearch/-/streamsearch-1.1.0.tgz",
--- a/package.json
+++ b/package.json
@ -18,6 +18,8 @@
 		"@sveltejs/kit": "^1.0.0",
 		"@typescript-eslint/eslint-plugin": "^5.45.0",
 		"@typescript-eslint/parser": "^5.45.0",
+		"@vime/core": "^5.4.0",
+		"@vime/svelte": "^5.4.0",
 		"bulma": "^0.9.4",
 		"eslint": "^8.28.0",
 		"eslint-config-prettier": "^8.5.0",
--- a/src/app.html
+++ b/src/app.html
@ -3,6 +3,7 @@
 	<head>
 		<meta charset="utf-8" />
 		<link rel="icon" href="%sveltekit.assets%/favicon.png" />
+		<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@vime/core@^5/themes/default.css" />
 		<meta name="viewport" content="width=device-width" />
 		%sveltekit.head%
 	</head>
--- a/src/app.scss
+++ b/src/app.scss
@ -32,4 +32,18 @@

 pre {
    background-color: transparent;
+}
+
+.terminal-player {
+    max-width: 735px;
+    max-height: 450px;
+}
+
+.sc-carousel__carousel-container {
+    --sc-arrow-size: 3px;
+}
+
+button.sc-carousel-arrow__circle {
+    width: 30px !important;
+    height: 30px !important;
 }
--- a/src/routes/+page.svelte
+++ b/src/routes/+page.svelte
@ -7,6 +7,8 @@
    import bash from 'svelte-highlight/languages/bash';
    import agate from 'svelte-highlight/styles/agate';

+    import {Player, Video, DefaultUi} from '@vime/svelte';
+
    let Carousel;
    onMount(async () => {
        // Perform dynamic import of svelte-carousel because it breaks
@ -16,24 +18,20 @@

    let images = [
        {
-            path: "/lure-arch.gif",
+            path: "/lure-arch.webm",
            caption: "Recorded on Arch Linux with LURE commit 81013ce",
-            alt: "GIF depicting an Arch Linux terminal with LURE installing a package"
        },
        {
-            path: "/lure-debian.gif",
+            path: "/lure-debian.webm",
            caption: "Recorded on Debian Sid with LURE commit 81013ce",
-            alt: "GIF depicting a Debian terminal with LURE installing a package"
        },
        {
-            path: "/lure-fedora.gif",
+            path: "/lure-fedora.webm",
            caption: "Recorded on Fedora 36 with LURE commit 81013ce",
-            alt: "GIF depicting a Fedora terminal with LURE installing a package"
        },
        {
-            path: "/lure-alpine.gif",
+            path: "/lure-alpine.webm",
            caption: "Recorded on Alpine Linux 3.16 with commit 81013ce",
-            alt: "GIF depicting an Alpine Linux terminal with LURE installing a package"
        },
    ];
 </script>
@ -93,10 +91,17 @@
    <!-- Use dynamically imported Carousel module -->
    <svelte:component this={Carousel}>
        {#each images as image}
-            <figure class="has-text-centered">
-                <img src={image.path} alt={image.alt ?? "GIF depicting LURE installing a package"}>
-                <figcaption>{image.caption ?? ""}</figcaption>
-            </figure>
+            <div class="has-text-centered">
+                <figure class="terminal-player mx-auto">
+                    <Player>
+                        <Video>
+                            <source data-src="{image.path}" type="video/webm">
+                        </Video>
+                        <DefaultUi></DefaultUi>
+                    </Player>
+                    <figcaption>{image.caption ?? ""}</figcaption>
+                </figure>
+            </div>
        {/each}
    </svelte:component>

--- a/static/lure-alpine.gif
+++ b/static/lure-alpine.gif
--- a/static/lure-alpine.webm
+++ b/static/lure-alpine.webm
--- a/static/lure-arch.gif
+++ b/static/lure-arch.gif
--- a/static/lure-arch.webm
+++ b/static/lure-arch.webm
--- a/static/lure-debian.gif
+++ b/static/lure-debian.gif
--- a/static/lure-debian.webm
+++ b/static/lure-debian.webm
--- a/static/lure-fedora.gif
+++ b/static/lure-fedora.gif
--- a/static/lure-fedora.webm
+++ b/static/lure-fedora.webm