ProPresenter-Lyrics-HTML/stagedisplay.html at master · anthonyeden/ProPresenter-Lyrics-HTML · GitHub

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
<!doctype html>
<html>
    <head>
        <link rel="stylesheet" href="css/core.css"/>
        <style>
            body {
                background-color: #000;
                color: #FFF;
                font-size: 3rem;
                font-family: sans-serif;
                font-weight: bold;
                padding: 2rem;
            }
            .container {
                flex-direction: column;
            }
            .container > div {
                margin-bottom: 2rem;
            }
            .container > div:last-child {
                margin-top: auto;
                padding-bottom: 2rem;
                color: #e3db00;
            }
            p {
                margin: 0;
            }
            .clock {
                font-style: italic;
            }
        </style>
        <link rel="stylesheet" href="css/user.css"/>
        <script type="text/javascript" src="config.js"></script>
        <script type="text/javascript" src="js/core.js"></script>
        <script>
            lyric_currentBlocks = document.getElementsByClassName('lyrics_current');
            lyric_nextBlocks = document.getElementsByClassName('lyrics_next');
            clockBlocks = document.getElementsByClassName('clock');

            function callback_lyrics_current(lines) {
                html = lyrics_text_html(lines);
                lyric_currentBlocks[0].innerHTML = html;
            }
            function callback_lyrics_next(lines) {
                html = lyrics_text_html(lines);
                lyric_nextBlocks[0].innerHTML = html;
            }
            function callback_clock(time, locale) {
                if(isNaN(time)) {
                    clockBlocks[0].innerHTML = time;
                } else {
                    const clockObj = new Date(time * 1000);
                    clockBlocks[0].innerHTML = clockObj.toLocaleTimeString(locale);
                }
            }
        </script>
    </head>
    <body>
        <div class="container">
            <div class="clock"><!-- Clock goes here --></div>
            <div class="lyrics_current"><!-- Lyrics go here --></div>
            <div class="lyrics_next"><!-- Lyrics go here --></div>
        </div>
    </body>
</html>