website/web/templates/chat.html

{{define "title"}}Chat Rooms{{end}}
{{define "content"}}
<div class="block">
    <section class="hero is-light is-bold">
        <div class="hero-body">
            <div class="container">
                <div class="level">
                    <div class="level-left">
                        <h1 class="title">
                            <span class="icon mr-4"><i class="fa fa-image"></i></span>
                            <span>{{template "title" .}}</span>
                        </h1>
                    </div>
                    <div class="level-right">
                        <div>
                            <a href="/chat?intent=join" class="button">
                                <span>Join the Chat Room</span>
                                <span class="icon"><i class="fa fa-external-link"></i></span>
                            </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>
</div>

<div class="block p-4">
    <div class="content">
        <p>
            {{PrettyTitle}} has a new chat room! Come and check it out. It features some public rooms, direct
            messages, and optional webcam support too. You may broadcast your video and other users may click
            to watch yours, and you can open one or multiple videos broadcasted by the other chatters.
        </p>

        <div class="notification is-success is-light" id="chatStatsBanner" style="display: none">
            <span id="usersOnline"></span>
            <a id="whoLink" href="#" style="visibility: hidden">Who?</a>
            <span id="whoList" style="visibility: hidden"></span>
        </div>

        <p>
            This chat room is currently ready for <strong>beta</strong> testing. It's a very new app built
            specifically for {{PrettyTitle}} and may still be lacking in some features and may be rough around
            the edges. Give it a try and <a href="/contact"><strong>send feedback</strong></a> if you run into any technical
            issues with the chat room!
        </p>

        <div class="notification is-info is-light">
            <strong>Note:</strong> the chat room has been tested and seems to work best on:

            <ul>
                <li><i class="fab fa-chrome"></i> All Chromium browsers <small>(including Chrome, Edge, Opera, Brave, etc.)</small></li>
                <li><i class="fab fa-firefox"></i> Mozilla Firefox</li>
            </ul>

            <p>
            <i class="fab fa-apple"></i> <strong>Mac OS users:</strong> Safari seems to work now (as of <abbr title="2023-02-08">2/8</abbr>)
            for the text chat features of the room. However, sound effects and video sharing aren't working
            yet for Safari. Use Firefox or Chrome (or other Chromium browser of your choice) for better odds
            of video support.
            </p>
        </div>

        <h3>Chat Room Rules</h3>

        <p>
            Please observe the following rules for the chat room.
        </p>

        <ul>
            <li>
                For now, <strong>keep your webcam content non-sexual.</strong> In the future there will be an
                ability to mark your webcam feed as Explicit or there will be a NSFW channel dedicated to that,
                but for now all the webcams are in the same place and users may not want to see you being naughty
                on camera if they click into your video.
            </li>
            <li>
                Be nice and respectful. <a href="/tos">Global website rules</a> apply to the chat room as well!
            </li>
        </ul>

        <p>
            Click on the button below to join the chat room:
        </p>

        <p>
            <a href="/chat?intent=join" target="_blank"
                class="button is-large is-link">
                Join the Chat Room Now
                <i class="fa fa-external-link ml-3"></i>
            </a>
        </p>
    </div>

</div>

<script>
window.addEventListener("DOMContentLoaded", () => {
    let url = "{{.ChatAPI}}",
        $banner = document.querySelector("#chatStatsBanner"),
        $whoLink = document.querySelector("#whoLink"),
        $whoList = document.querySelector("#whoList"),
        $usersOnline = document.querySelector("#usersOnline");

    $whoLink.addEventListener("click", (e) => {
        e.preventDefault();
        $whoLink.style.display = "none";
        $whoList.style.visibility = "visible";
    });

    fetch(url, {
        mode: 'cors',
        cache: 'no-cache',
    }).then(resp => resp.json()).then(result => {
        $banner.style.display = "block";
        console.log(result);
        let people = result.UserCount === 1 ? 'person' : 'people';
        let isAre = result.UserCount === 1 ? 'is' : 'are';
        $usersOnline.innerHTML = `There ${isAre} currently <strong>${result.UserCount}</strong> ${people}</span> in the chat room`;
        $whoList.innerHTML = result.Usernames.join(", ");

        // Show the "Who?" link if there's anybody.
        if (result.UserCount > 0) {
            $usersOnline.innerHTML += ":";
            $whoLink.style.visibility = "visible";
        } else {
            $usersOnline.innerHTML += ".";
        }
    }).catch(console.error);
});
</script>
{{end}}