Started video player

2024-03-08 03:58:11 +13:00
parent dfa89fb6cf
commit 8a6ed11631
6 changed files with 95 additions and 5 deletions
@@ -10,6 +10,7 @@
 			"dependencies": {
 				"beercss": "^3.5.1",
 				"human-number": "^2.0.4",
+				"plyr": "^3.7.8",
 				"svelte-persisted-store": "^0.9.1"
 			},
 			"devDependencies": {
@@ -1511,6 +1512,16 @@
 				"node": ">= 0.6"
 			}
 		},
+		"node_modules/core-js": {
+			"version": "3.36.0",
+			"resolved": "https://registry.npmjs.org/core-js/-/core-js-3.36.0.tgz",
+			"integrity": "sha512-mt7+TUBbTFg5+GngsAxeKBTl5/VS0guFeJacYge9OmHb+m058UwwIm41SE9T4Den7ClatV57B6TYTuJ0CX1MAw==",
+			"hasInstallScript": true,
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/core-js"
+			}
+		},
 		"node_modules/cross-spawn": {
 			"version": "7.0.3",
 			"resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
@@ -1554,6 +1565,11 @@
 			"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
 			"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
 		},
+		"node_modules/custom-event-polyfill": {
+			"version": "1.0.7",
+			"resolved": "https://registry.npmjs.org/custom-event-polyfill/-/custom-event-polyfill-1.0.7.tgz",
+			"integrity": "sha512-TDDkd5DkaZxZFM8p+1I3yAlvM3rSr1wbrOliG4yJiwinMZN8z/iGL7BTlDkrJcYTmgUSb4ywVCc3ZaUtOtC76w=="
+		},
 		"node_modules/debug": {
 			"version": "4.3.4",
 			"resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz",
@@ -2406,6 +2422,11 @@
 				"node": ">=10"
 			}
 		},
+		"node_modules/loadjs": {
+			"version": "4.2.0",
+			"resolved": "https://registry.npmjs.org/loadjs/-/loadjs-4.2.0.tgz",
+			"integrity": "sha512-AgQGZisAlTPbTEzrHPb6q+NYBMD+DP9uvGSIjSUM5uG+0jG15cb8axWpxuOIqrmQjn6scaaH8JwloiP27b2KXA=="
+		},
 		"node_modules/locate-character": {
 			"version": "3.0.0",
 			"resolved": "https://registry.npmjs.org/locate-character/-/locate-character-3.0.0.tgz",
@@ -2725,6 +2746,18 @@
 				"url": "https://github.com/sponsors/jonschlinkert"
 			}
 		},
+		"node_modules/plyr": {
+			"version": "3.7.8",
+			"resolved": "https://registry.npmjs.org/plyr/-/plyr-3.7.8.tgz",
+			"integrity": "sha512-yG/EHDobwbB/uP+4Bm6eUpJ93f8xxHjjk2dYcD1Oqpe1EcuQl5tzzw9Oq+uVAzd2lkM11qZfydSiyIpiB8pgdA==",
+			"dependencies": {
+				"core-js": "^3.26.1",
+				"custom-event-polyfill": "^1.0.7",
+				"loadjs": "^4.2.0",
+				"rangetouch": "^2.0.1",
+				"url-polyfill": "^1.1.12"
+			}
+		},
 		"node_modules/postcss": {
 			"version": "8.4.35",
 			"resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.35.tgz",
@@ -2899,6 +2932,11 @@
 				}
 			]
 		},
+		"node_modules/rangetouch": {
+			"version": "2.0.1",
+			"resolved": "https://registry.npmjs.org/rangetouch/-/rangetouch-2.0.1.tgz",
+			"integrity": "sha512-sln+pNSc8NGaHoLzwNBssFSf/rSYkqeBXzX1AtJlkJiUaVSJSbRAWJk+4omsXkN+EJalzkZhWQ3th1m0FpR5xA=="
+		},
 		"node_modules/readdirp": {
 			"version": "3.6.0",
 			"resolved": "https://registry.npmjs.org/readdirp/-/readdirp-3.6.0.tgz",
@@ -3443,6 +3481,11 @@
 				"punycode": "^2.1.0"
 			}
 		},
+		"node_modules/url-polyfill": {
+			"version": "1.1.12",
+			"resolved": "https://registry.npmjs.org/url-polyfill/-/url-polyfill-1.1.12.tgz",
+			"integrity": "sha512-mYFmBHCapZjtcNHW0MDq9967t+z4Dmg5CJ0KqysK3+ZbyoNOWQHksGCTWwDhxGXllkWlOc10Xfko6v4a3ucM6A=="
+		},
 		"node_modules/util-deprecate": {
 			"version": "1.0.2",
 			"resolved": "https://registry.npmjs.org/util-deprecate/-/util-deprecate-1.0.2.tgz",
@@ -34,6 +34,7 @@
 	"dependencies": {
 		"beercss": "^3.5.1",
 		"human-number": "^2.0.4",
+		"plyr": "^3.7.8",
 		"svelte-persisted-store": "^0.9.1"
 	}
 }
@@ -2,7 +2,7 @@ import { get } from 'svelte/store';
 import { invidiousInstance, returnYTDislikesInstance } from '../../store';
 import type { ReturnYTDislikes, Video, VideoPlay } from './model';

-function buildPath(path: string): string {
+export function buildPath(path: string): string {
  return `${get(invidiousInstance)}/api/v1/${path}`;
 }

@@ -92,9 +92,10 @@ export interface VideoPlay extends Video {
  genreUrl: string;
  hlsUrl?: string;
  adaptiveFormats: AdaptiveFormats[];
-  formatStreams: FormatStreams;
+  formatStreams: FormatStreams[];
  recommendedVideos: VideoBase[];
  authorThumbnails: AuthorThumbnails[];
+  captions: Captions[];
 }

 export interface ReturnYTDislikes {
@@ -28,7 +28,7 @@
 		{
 			icon: 'history',
 			href: '/history',
-			name: 'history'
+			name: 'History'
 		}
 	];
 </script>
@@ -1,15 +1,48 @@
 <script lang="ts">
+	import humanNumber from 'human-number';
+
+	import { get } from 'svelte/store';
+
+	import Plyr from 'plyr';
+	import 'plyr/dist/plyr.css';
+
 	import Thumbnail from '$lib/Thumbnail.svelte';
 	import { numberWithCommas } from '$lib/misc.js';
-	import humanNumber from 'human-number';
+	import { onMount } from 'svelte';
+
+	import { invidiousInstance } from '../../../store';

 	export let data;

 	const cleanRound = (number: number) => Number.parseFloat(number.toString()).toFixed(1);
+
+	let player;
+	onMount(() => {
+		player = new Plyr('#player');
+		player.source = {
+			type: 'video',
+			previewThumbnails: {
+				src: data.video.videoThumbnails[0].url
+			},
+			poster: data.video.videoThumbnails[0].url,
+			tracks: data.video.captions.map((caption) => {
+				return {
+					kind: 'captions',
+					label: caption.label,
+					srcLang: caption.languageCode,
+					src: `${get(invidiousInstance)}${caption.url}`
+				};
+			}),
+			sources: data.video.formatStreams.map((format) => {
+				return { src: format.url, size: Number(format.size.split('x')[1]), type: format.type };
+			})
+		};
+	});
 </script>

-<div class="grid large-margin">
+<div class="grid">
 	<div class="s12 m12 l10">
+		<video width="100%" id="player" playsinline controls> </video>
 		<h5>{data.video.title}</h5>

 		<nav>
@@ -51,3 +84,15 @@
 		{/each}
 	</div>
 </div>
+
+<style>
+	:root {
+		--plyr-color-main: var(--primary);
+	}
+
+	@media screen and (min-width: 1560px) {
+		.grid {
+			margin: 20px 140px;
+		}
+	}
+</style>