wip: imports hlsjs

assets/app.js

@@ -1,4 +1,5 @@
 import './bootstrap.js';
+import Hls from "./vendor/hls.js/hls.js.index.js";
 /*
  * Welcome to your app's main JavaScript file!
  *
@@ -18,3 +19,29 @@ var observer = new MutationObserver(function(mutations) {
 
 observer.observe(document, {attributes: false, childList: true, characterData: false, subtree:true});
 
+document.addEventListener("DOMContentLoaded", () => {
+    const videoUrl = "http://127.0.0.1:11470/hlsv2/2b76fe2ec12c83d264076fb859923c5d/master.m3u8?mediaURL=https%3A%2F%2Ftorrentio.strem.fun%2Frealdebrid%2FQYYBR7OSQ4VEFKWASDEZ2B4VO67KHUJY6IWOT7HHA7ATXO7QCYDQ%2F6bf1938db882f6fcbb0dafa6e7326230e7f4eae0%2Fnull%2F3%2FSurvivor.S48E01.1080p.HEVC.x265-MeGusta.mkv%26videoCodecs%3Dh264%26videoCodecs%3Dh265%26videoCodecs%3Dhevc%26videoCodecs%3Dvp9%26audioCodecs%3Daac%26audioCodecs%3Dmp3%26audioCodecs%3Dopus%26maxAudioChannels%3D2";
+
+    var video = document.getElementById('video');
+    if (Hls.isSupported()) {
+        var hls = new Hls({
+            debug: true,
+        });
+        hls.loadSource(videoUrl);
+        hls.attachMedia(video);
+        hls.on(Hls.Events.MEDIA_ATTACHED, function () {
+            video.muted = true;
+            video.play();
+        });
+    }
+        // hls.js is not supported on platforms that do not have Media Source Extensions (MSE) enabled.
+        // When the browser has built-in HLS support (check using `canPlayType`), we can provide an HLS manifest (i.e. .m3u8 URL) directly to the video element through the `src` property.
+// This is using the built-in support of the plain video element, without using hls.js.
+    else if (video.canPlayType('application/vnd.apple.mpegurl')) {
+        video.src = videoUrl;
+        video.addEventListener('canplay', function () {
+            video.play();
+        });
+    }
+})
+

importmap.php

@@ -40,4 +40,7 @@ return [
     'stimulus-use' => [
         'version' => '0.52.2',
     ],
+    'hls.js' => [
+        'version' => '1.6.5',
+    ],
 ];

templates/index/index.html.twig

@@ -5,6 +5,12 @@
 {% block body %}
     <div class="p-4 flex flex-col grow gap-4 z-30">
         <h2 class="mb-2 text-3xl font-bold text-gray-50">Dashboard</h2>
+        <div class="flex flex-row gap-4">
+            <twig:Card title="Play Survivor" class="w-full">
+                <video width="352" height="198" controls>
+                </video>
+            </twig:Card>
+        </div>
         <div class="flex flex-row gap-4">
             <twig:Card title="Active Downloads" class="w-full">
                 <twig:DownloadList :type="'active'" />