social_stream/baretempate.html at main · steveseguin/social_stream · 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
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!--
This is a simple boilerplate for creating custom Social Stream Ninja overlay pages and other integrations with the Social Stream Ninja IFRAME API.
Messages can be sent to and from the API.
By default, the API is configured in a consume-all messages mode, which is useful for most applications.
Messages contain many fields, but the chatname, chatmessage, chatimg, and type are the primary ones.
 -->

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Template - Social Stream Ninja</title>
    <link rel="icon" href="./favicon.ico" />
    <link rel="preload" href="./thirdparty/NotoColorEmoji.ttf" as="font" type="font/ttf" crossorigin="anonymous">
    <style>
        @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;600;700&display=swap');

        body {
            font-family: 'Montserrat', Arial, sans-serif;
            background-color: #0000;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            margin: 0;
        }

    </style>
</head>
<body>
    </div>
    <script>
        const urlParams = new URLSearchParams(window.location.search);


        function processData(data) {
			console.log(data);

			if (data.content) {
                data = data.content;
            }
			if (data.chatmessage){

				// data.chatimg - avatar of user
				// data.chatname - name of user
				// data.chatmessage - a text message from user
				// data.contentimg - a link to a media file
				// data.type - what site, like twitch or facebook, that the message came from
				// data.hasDonation - an possible donation value if there was a donation attached, with unit.

			}
        }

		// we get the data via this embedded iFRAME.
        const iframe = document.createElement("iframe");
        const filename = "dock"; //new URL(window.location.href).pathname.split('/').pop().split('.')[0];
        const password = urlParams.get('password') || 'false';
        const lanonly = urlParams.has('lanonly') ? '&lanonly' : '';
        iframe.src = "https://vdo.socialstream.ninja/?ln&salt=vdo.ninja&notmobile&password=" + encodeURIComponent(password) + lanonly + "&solo&view=" + urlParams.get('session') + "&novideo&noaudio&label="+filename+"&cleanoutput&room=" + urlParams.get('session');
        iframe.style.width = "0px";
        iframe.style.height = "0px";
        iframe.style.position = "fixed";
        iframe.style.left = "-100px";
        iframe.style.top = "-100px";
        iframe.id = "frame1";
        document.body.appendChild(iframe);

        const eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
        const eventer = window[eventMethod];
        const messageEvent = eventMethod === "attachEvent" ? "onmessage" : "message";

        eventer(messageEvent, function (e) {
            if (e.source != iframe.contentWindow) return;
            if (e.data && typeof e.data === "object" && e.data.dataReceived && typeof e.data.dataReceived === "object") {
                if ("overlayNinja" in e.data.dataReceived) {
                    processData(e.data.dataReceived.overlayNinja);
                }
            }
        });
    </script>
</body>
</html>