From 2ac4bb6dfc0272af0233aedf327464f3687aa078 Mon Sep 17 00:00:00 2001
From: vance <vance@vance.land>
Date: Tue, 7 May 2024 20:25:03 -0700
Subject: [PATCH] hls.js instead of iframe

---
 index.html | 141 +++++++++++++++++++++++++++++++++--------------------
 1 file changed, 89 insertions(+), 52 deletions(-)
diff --git a/index.html b/index.html
index 5e7870c..81eba7a 100644
--- a/index.html
+++ b/index.html
@@ -21,7 +21,7 @@
             color: #20C20E;
             font-family: 'VT323', monospace;
             font-size: 16pt;
-            cursor: url('banana.png'), auto;
+            cursor: none;
         }
 
         html {
@@ -52,6 +52,12 @@
             font-size: 1rem;
         }
 
+        #banana {
+            position: absolute;
+            z-index: 2;
+            pointer-events: none;
+        }
+
         #bonzi {
             position: absolute;
             transition: transform 0.8s;
@@ -66,16 +72,16 @@
             left: 50%;
             transform: translate(-50%, -50%);
             z-index: 0;
-            border: none;
         }
     </style>
 </head>
 
 <body>
+<img alt='banana' id='banana' src='banana.png'/>
 <img alt='bonzi' id='bonzi' src='bonzi.png'/>
-<iframe allowfullscreen height='360px' id='live' referrerpolicy='origin' scrolling='no'
-        src='https://live.vance.land/vance/' title='live.vance.land' width='640px'>
-</iframe>
+<video autoplay height='360px' playsinline id='live' width='640px'>
+</video>
+<script src="https://cdn.jsdelivr.net/npm/hls.js/dist/hls.min.js"></script>
 <script>
     const email = (function () {
         var p = Array.prototype.slice.call(arguments),
@@ -135,36 +141,38 @@
             'link': 'https://dreamsinco.de'
         }
     };
-    
-    const bonzi = document.getElementById('bonzi');
-    const live = document.getElementById('live');
 
     // bonzi
+    const banana = document.getElementById('banana');
+    const bonzi = document.getElementById('bonzi');
+
     let mouseTop = 0;
     let mouseLeft = 0;
     let bonziTop = 0;
     let bonziLeft = 0;
     const speed = 0.02;
-    function moveBonzi() {
+
+    (function moveBonzi() {
         bonzi.style.transform = bonziLeft > mouseLeft ? 'translate(5%, -35%) scaleX(-1)' : 'translate(-80%, -35%)';
         bonziTop = bonziTop + ((mouseTop - bonziTop) * speed);
         bonziLeft = bonziLeft + ((mouseLeft - bonziLeft) * speed);
         bonzi.style.top = `${bonziTop}px`;
         bonzi.style.left = `${bonziLeft}px`;
         requestAnimationFrame(moveBonzi);
-    }
-    moveBonzi();
+    })();
+
     ['mousemove', 'touchstart', 'touchmove'].forEach(type => {
        window.addEventListener(type, event => {
            mouseTop = event.clientY || event.touches[0].clientY;
            mouseLeft = event.clientX || event.touches[0].clientX;
+           banana.style.top = `${mouseTop}px`;
+           banana.style.left = `${mouseLeft}px`;
        });
     });
 
-    // remove stream if embedded
-    if (window.self !== window.top) {
-        live.remove();
-    }
+    //live
+    const live = document.getElementById('live');
+    const liveSrc = new URL('index.m3u8', socials.live.link).toString();
 
     const vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0);
     const vh = Math.max(document.documentElement.clientHeight || 0, window.innerHeight || 0);
@@ -175,61 +183,90 @@
         live.height = `${vw * (9 / 16)}px`;
     }
 
-    // check if stream active every 5 seconds
-    setInterval(function checkLive() {
-        fetch(new URL('index.m3u8', socials.live.link))
-            .then(response => {
-                live.style.display = response.ok ? 'inline' : 'none';
-            });
-        return checkLive;
-    }(), 5000);
+    (function loadStream() {
+        // remove stream if embedded
+        if (window.self !== window.top) {
+            live.remove();
+            return;
+        }
 
-    const min_speed = 10;
-    const max_speed = 20;
-    let entities = 0;
-    const max_entities = Math.floor(vw / 30);
+        if (Hls.isSupported()) {
+            const hls = new Hls({
+                maxLiveSyncPlaybackRate: 1.5,
+            });
+
+            hls.on(Hls.Events.ERROR, (event, data) => {
+                if (data.fatal) {
+                    live.style.display = 'none';
+                    hls.destroy();
+                }
+                setTimeout(loadStream, 5000);
+            });
+            hls.on(Hls.Events.MEDIA_ATTACHED, () => {
+                hls.loadSource(liveSrc);
+            });
+            hls.on(Hls.Events.MANIFEST_PARSED, () => {
+                live.style.display = 'inline';
+                live.play();
+            });
+
+            hls.attachMedia(live);
+        } else if (live.canPlayType('application/vnd.apple.mpegurl')) {
+            fetch(liveSrc)
+                .then(() => {
+                    live.src = liveSrc;
+                    live.play();
+                });
+        }
+    })();
 
     // animated anchors
-    function animate(entity) {
-        let flag = parseInt(entity.style.left, 10);
+    const minSpeed = 10;
+    const maxSpeed = 20;
+    let anchors = 0;
+    const maxAnchors = Math.floor(vw / 30);
+
+    function animateAnchor(anchor) {
+        let flag = parseInt(anchor.style.left, 10);
 
         setInterval(() => {
-            entity.style.left = `${--flag}px`;
+            anchor.style.left = `${--flag}px`;
 
-            if (entity.offsetWidth <= -flag) {
-                flag = vw + Math.floor(entity.offsetWidth / 2);
-                let posy = Math.floor(Math.random() * vh) - Math.floor(entity.offsetHeight / 2);
-                entity.style.top = `${posy}px`;
+            if (anchor.offsetWidth <= -flag) {
+                flag = vw + Math.floor(anchor.offsetWidth / 2);
+                let posy = Math.floor(Math.random() * vh) - Math.floor(anchor.offsetHeight / 2);
+                anchor.style.top = `${posy}px`;
             }
-        }, Math.floor(Math.random() * (max_speed - min_speed) + min_speed));
+        }, Math.floor(Math.random() * (maxSpeed - minSpeed) + minSpeed));
     }
 
     function createAnchor(link, content) {
-        if (entities >= max_entities) {
+        if (anchors >= maxAnchors) {
             return;
         }
-        const entity = document.createElement('a');
-        entity.href = link;
-        entity.target = '_blank';
-        entity.innerHTML = content;
 
-        const posx = Math.floor(Math.random() * vw) - Math.floor(entity.offsetWidth / 2);
-        const posy = Math.floor(Math.random() * vh) - Math.floor(entity.offsetHeight / 2);
-        let z_index = Math.floor(entities - max_entities / 2);
-        z_index = (z_index >= 0) ? z_index + 1 : z_index;
+        const anchor = document.createElement('a');
+        anchor.href = link;
+        anchor.target = '_blank';
+        anchor.innerHTML = content;
 
-        entity.style.position = 'absolute';
-        entity.style.top = `${posy}px`;
-        entity.style.left = `${posx}px`;
-        entity.style.zIndex = `${z_index}`;
+        const posTop = Math.floor(Math.random() * vh) - Math.floor(anchor.offsetHeight / 2);
+        const posLeft = Math.floor(Math.random() * vw) - Math.floor(anchor.offsetWidth / 2);
+        let zIndex = Math.floor(anchors - maxAnchors / 2);
+        zIndex = (zIndex >= 0) ? zIndex + 1 : zIndex;
 
-        document.body.prepend(entity);
-        ++entities;
-        animate(entity);
+        anchor.style.position = 'absolute';
+        anchor.style.top = `${posTop}px`;
+        anchor.style.left = `${posLeft}px`;
+        anchor.style.zIndex = `${zIndex}`;
+
+        document.body.prepend(anchor);
+        ++anchors;
+        animateAnchor(anchor);
     }
 
     // Always have socials
-    while (entities < max_entities / 4) {
+    while (anchors < maxAnchors / 4) {
         for (const key in socials) {
             createAnchor(socials[key].link, socials[key].text);
         }
