HLS support on Safari

Signed-off-by: Xe Iaso <me@christine.website>

1 files changed, 20 insertions, 5 deletions

diff --git a/lib/xesite_templates/src/lib.rs b/lib/xesite_templates/src/lib.rs
index 2e095db..ab8c038 100644
--- a/lib/xesite_templates/src/lib.rs
+++ b/lib/xesite_templates/src/lib.rs
@@ -96,12 +96,17 @@ pub fn sticker(name: String, mood: String) -> Markup {
 }
 
 pub fn video(path: String) -> Markup {
+    let stream_url = format!(
+        "https://cdn.xeiaso.net/file/christine-static/{}/index.m3u8",
+        path
+    );
     let hls_script = PreEscaped(format!(
         r#"
 <script>
   if (Hls.isSupported()) {{
-    var video = document.getElementById('video');
-    var hls = new Hls();
+    let video = document.getElementById('video');
+    let hls = new Hls();
+    let videoSrc = "{}";
     hls.on(Hls.Events.MEDIA_ATTACHED, function () {{
       console.log('video and hls.js are now bound together !');
     }});
@@ -110,18 +115,28 @@ pub fn video(path: String) -> Markup {
         'manifest loaded, found ' + data.levels.length + ' quality level'
       );
     }});
-    hls.loadSource("https://cdn.xeiaso.net/file/christine-static/{}/index.m3u8");
+    hls.loadSource(videoSrc);
     // bind them together
     hls.attachMedia(video);
+  }} else if (video.canPlayType('application/vnd.apple.mpegurl')) {{
+      video.src = videoSrc;
   }}
 </script>
 "#,
-        path
+        stream_url
     ));
 
     html! {
         script src="/static/js/hls.js" {}
-        video id="video" width="100%" controls {}
+        noscript {
+            div.warning {
+                (conv("Mara".into(), "hacker".into(), html!{"You need to enable JavaScript for this to work."}))
+            }
+        }
+        video id="video" width="100%" controls {
+            source src=(stream_url) r#type="application/vnd.apple.mpegurl";
+            source src="https://cdn.xeiaso.net/file/christine-static/blog/HLSBROKE.mp4" r#type="video/mp4";
+        }
         (hls_script)
     }
 }