Replace videos and their components (#77)

Resize videos

Replace videos in the web files

.gitignore

@@ -14,3 +14,6 @@ npm-debug.log
 
 # Compiled site
 /public/
+
+# Custom VSC workspace
+*.code-workspace

src/help/faq/extensions.md

@@ -30,36 +30,26 @@ You can find the list of extensions to download [here](/extensions/)
 ### How do I allow third-party installations?
 When installing your first extension and are prompted that your phone isn't allowed to install unknown apps from that source, simply follow the prompt to allow it.
 
-<div class="carousel" id="unknown-source-carousel">
+<Carousel name="carousel-unknown-source">
-<div class="carousel-cell">
+<CarouselItem>
-		<figure class="centered">
+<figure class="centered">
-			<h4>Android 8.0 and higher</h4>
+	<h4>Android 8.0 and higher</h4>
-				<p>In newer versions of Android you need to enable "Install unknown apps" by a per-app basis.</p>
+	<p>In newer versions of Android you need to enable "Install unknown apps" by a per-app basis.</p>
-		<video autoplay crossorigin="use-credentials" height="355" intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted" playsinline="playsinline" :poster="$withBase('/assets/media/unknownapps-api28.png')" preload="none" width="200">
+	<video :poster="$withBase('/assets/media/video-guide-unknownsources-android10.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-			<source :src="$withBase('/assets/media/unknownapps-api28.webm')" type="video/webm" />
+		<source :src="$withBase('/assets/media/video-guide-unknownsources-android10.webm')" type="video/webm" />
-			<source :src="$withBase('/assets/media/unknownapps-api28.mp4')" type="video/mp4" />
+	</video>
-		</video>
+</figure>
-		</figure>
+</CarouselItem>
-</div>
+<CarouselItem>
-<div class="carousel-cell">
+<figure class="centered">
-		<figure class="centered">
+	<h4>Android 7.1 and lower</h4>
-			<h4>Android 7.1 and lower</h4>
+	<p>In older versions of Android you only need to enable "Unknown sources" globally.</p>
-		<p>In older versions of Android you only need to enable "Unknown sources" globally.</p>
+	<video :poster="$withBase('/assets/media/video-guide-unknownsources-android711.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-		<video autoplay crossorigin="use-credentials" height="355" intrinsicsize="400x688" loading="lazy" loop="loop" muted="muted" playsinline="playsinline" :poster="$withBase('/assets/media/unknownapps-api25.png')" preload="none" width="200">
+		<source :src="$withBase('/assets/media/video-guide-unknownsources-android711.webm')" type="video/webm" />
-			<source :src="$withBase('/assets/media/unknownapps-api25.webm')" type="video/webm" />
+	</video>
-			<source :src="$withBase('/assets/media/unknownapps-api25.mp4')" type="video/mp4" />
+</figure>
-		</video>
+</CarouselItem>
-		</figure>
+</Carousel>
-</div>
-</div>
-<script>
-var config = {
-	adaptiveHeight: true,
-	wrapAround: true,
-	pageDots: false
-};
-new Flickity('#unknown-source-carousel', config);
-</script>
 
 ::: aside
 If you need more help regarding this, read [this](https://www.theandroidsoul.com/how-to-allow-apps-installation-from-unknown-sources-on-android-9-pie/)

src/help/guides/backup.md

@@ -11,12 +11,8 @@ This category of settings allows you to setup a backup and restore mechanism for
 Create backup lets you backup your library (titles, categories, read chapters), tracking settings, and reading history. This setting will bring up a dialog letting you choose what to backup. Manga is greyed out because it will always be backed up.
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-backup-create.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-backup-create.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/createbackup.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/createbackup.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/createbackup.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::
@@ -25,12 +21,8 @@ Create backup lets you backup your library (titles, categories, read chapters),
 Restore backup lets you restore your previously created backup. This setting will bring up a file explorer for you. Proceed by navigating to where your stored backup is located and then select it.
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-backup-restore.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-backup-restore.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/restorebackup.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/restorebackup.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/restorebackup.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::

src/help/guides/categories.md

@@ -13,12 +13,8 @@ To make a category, go to `My Library`, then click on the triple dots (`⋮`) on
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-category-create.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-category-create.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/createcategory.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/createcategory.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/createcategory.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::
@@ -29,12 +25,8 @@ You can edit a Category in `My Library` > triple dots (`⋮`) > `Edit categories
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-category-edit.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-category-edit.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/editcategory.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/editcategory.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/editcategory.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::
@@ -47,12 +39,8 @@ To do this, go to `My Library` > triple dots (`⋮`) > `Edit categories` then dr
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-category-reorder.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-category-reorder.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/reordercategories.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/reordercategories.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/reordercategories.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::
@@ -63,12 +51,8 @@ You can delete a Category in `My Library` > triple dots (`⋮`) > `Edit categori
 
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-category-delete.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-category-delete.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/removecategory.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/removecategory.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/removecategory.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::
@@ -82,12 +66,8 @@ You can also add Manga to multiple Categories by selecting the categories you wa
 :::
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-category-add-to.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-category-add-to.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/addmangatocategory.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/addmangatocategory.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/addmangatocategory.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::
@@ -100,12 +80,8 @@ You can move a Manga to multiple Categories by selecting the categories you want
 :::
 ::: expander <strong>Click to reveal video guide!</strong>
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-category-remove-from.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-category-remove-from.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/removemangafromcategory.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/removemangafromcategory.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/removemangafromcategory.mp4')" type="video/mp4" />
 	</video>
 </figure>
 :::

src/help/guides/getting-started.md

@@ -33,12 +33,8 @@ Press the `Install` button and accept the installation prompt that will be shown
 If you're getting stopped by a security prompt and don't know what to do you can read this FAQ section: ["How do I allow third-party installations?"](/help/faq/extensions/#how-do-i-allow-third-party-installations).
 
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-extension-install.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x100" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-extension-install.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/extensioninstaller.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/extensioninstaller.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/extensioninstaller.mp4')" type="video/mp4" />
 	</video>
 </figure>
 
@@ -53,11 +49,7 @@ Now that you've found manga that you want to add to your library, click on it an
 It should now appear in your `My Library` tab, ready to be read!
 
 <figure class="centered">
-	<video autoplay crossorigin="use-credentials" height="534"
+	<video :poster="$withBase('/assets/media/video-guide-library-add-to.png')" height="500" autoplay="autoplay" loop="loop" preload="none" loading="lazy" crossorigin="use-credentials" playsinline="playsinline"   >
-	  intrinsicsize="500x1000" loading="lazy" loop="loop" muted="muted"
+		<source :src="$withBase('/assets/media/video-guide-library-add-to.webm')" type="video/webm" />
-	  playsinline="playsinline" :poster="$withBase('/assets/media/addtolibrary.png')"
-	  preload="none" width="300">
-		<source :src="$withBase('/assets/media/addtolibrary.webm')" type="video/webm" />
-		<source :src="$withBase('/assets/media/addtolibrary.mp4')" type="video/mp4" />
 	</video>
 </figure>