~fabrixxm/livehtml: view.html - sourcehut git


                                                                                
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
<!doctype html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Live GL-Como</title>

        <link rel="stylesheet" href="style.css">
        <link href="./video-js.min.css" rel="stylesheet">
        <script src="./video.min.js"></script>

    </head>
    <body>
        <header>
            <nav>
                <ul>
                    <li><a href="https://gl-como.it/"><img alt="GL-Como" src="./img/logo.png" height="70"></a></li>
                    <li><a href="/">Home</a></li>
                </ul>
                <ul>
                    <li><a href="#" id="switch">Switch dark/ligh</a></li>
                </ul>
            </nav>
        </header>
        <main>
            <section>
                <video id="player"
                       class="video-js vjs-default-skin vjs-16-9"
                       poster="./img/poster.png"
                       controls>
                </video>
            </section>
            <aside>
                <iframe src=""></iframe>
            </aside>
            <footer>Watch with your preferred player: <span id="video-link"></a></footer>
            <footer>Join the chat from your favorite IRC client: <span id="irc-link"></a></footer>
        </main>
    </body>
    <script>
     document.addEventListener("DOMContentLoaded", function(ev) {
         var roomname = window.location.hash.replace("#", "");
         if (roomname === "") return;

         var ircnet = 'irc.libera.chat'

         var m3u8link = `https://live.gl-como.it/hls/${roomname}.m3u8`;
         var kiwilink = `https://kiwiirc.com/nextclient/#irc://${ircnet}/#${roomname}`;
         var irclink = `<a href="irc://${ircnet}:6667/${roomname}">#${roomname} on ${ircnet}</a>`;
         var vlclink = `<a href="${m3u8link}">${m3u8link}</a>`;


         var player = videojs('player', {
             html: {
                 nativeCaptions: false,
             },
         });
         player.ready(function() {
             player.on("error", () => {
                 document.querySelector(".vjs-modal-dialog-content").textContent =
                     "The stream is offline right now, try again later?";
             });
             player.src({
                 src: m3u8link,
                 type: 'application/x-mpegURL'
             });
         })


         document.querySelector("iframe").src = kiwilink;
         document.querySelector("#video-link").innerHTML = vlclink;
         document.querySelector("#irc-link").innerHTML = irclink;


     });

     function setup_switch() {
         document.querySelector("#switch").addEventListener("click", function(ev){
             ev.preventDefault();
             const isdark = document.body.classList.toggle('dark');
             window.localStorage.setItem('theme', isdark ? "dark" : "light");
         });

         const theme = window.localStorage.getItem('theme');
         if (theme == "dark") document.body.classList.add('dark');
     };
     setup_switch();

    </script>
</html>