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" target="_blank" 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">
    {{if .IsShyUser}}
    <div class="notification is-danger is-light">
        <i class="fa fa-exclamation-triangle"></i> You have a <strong>Shy Account</strong> and you may not enter
        the chat room at this time, where our {{PrettyTitle}} members may be sharing their cameras. You are
        sharing no public photos with the community, so you get limited access to ours.
        <a href="/faq#shy-faqs">Learn more about how to resolve this issue. <small class="fa fa-external-link"></small></a>
    </div>
    {{end}}

    <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="display: none"></span>

            <!-- Camera stats if active -->
            <div id="cameraStats" style="display: none" class="mt-2">
                <i class="fa fa-camera"></i>
                <span id="cameraCount">0 people are on camera</span>
                <span class="is-size-7">
                    (<i class="fa fa-video has-text-info"></i> <span id="cameraBlue" class="has-text-info">0</span> /
                    <i class="fa fa-video has-text-danger"></i> <span id="cameraRed" class="has-text-danger">0</span>).
                </span>
            </div>
        </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">
            <p>
            <strong>Note:</strong> the chat room has been tested and seems to work best on
            <i class="fab fa-firefox"></i> Firefox and all <i class="fab fa-chrome"></i> Chromium browsers <small>(including Chrome,
            Edge, Opera, Brave, etc.)</small> and on most types of devices <small>(Windows, Mac OS, Linux, and Android)</small> with text chat and
            video sharing all working perfectly.
            </p>

            <p>
            Support for Apple devices is a little more nuanced:
            </p>

            <p>
            <i class="fab fa-apple"></i> <strong>Mac OS:</strong> Safari seems to work now (as of <abbr title="2023-03-31">3/31</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>

            <p>
            <i class="fab fa-apple"></i> <strong>iPad &amp; iPhone:</strong> give the chat room a try as of 3/31, it may be able to enter
            the chat room now but I'm not sure whether it will support video sharing or not.
            </p>

            <p>
            Unfortunately, Chrome and Firefox do not work any better on iOS because Apple currently is afraid of competition
            in the web browser space and every iOS browser is really just a custom wrapper around Safari - so while Chrome/Firefox
            work great on Android this is not true of iOS.
            </p>
        </div>

        <p>
            For a tour of the chat interface &amp; features, see the <a href="https://chat.nonshy.com/about">Chat Help page</a>.
        </p>

        <h3>Chat Room Rules</h3>

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

        <ul>
            <li>
                Be nice and respectful. <a href="/tos">Global website rules</a> apply to the chat room as well!
            </li>
            <li>
                You are permitted to be sexual on camera, but please <strong>mark your video as <span class="has-text-danger">Explicit</span></strong>
                by clicking the <i class="fa fa-fire"></i> button at the top of the screen (or opting in
                via the checkbox when you start your camera). This will allow other chatters to be warned before
                they open your video in case they don't want to see that stuff.<br><br>

                Explicit videos will show with a red <i class="fa fa-video has-text-danger"></i> icon instead of
                <i class="fa fa-video has-text-info"></i> blue in the Who List so you can get an idea what you're
                getting yourself into before you click in.
            </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>
function showWhoBanner(chatStatistics) {
    const $banner = document.querySelector("#chatStatsBanner"),
        $whoLink = document.querySelector("#whoLink"),
        $whoList = document.querySelector("#whoList"),
        $usersOnline = document.querySelector("#usersOnline")
        $cameraStats = document.querySelector("#cameraStats")
        $cameraCount = document.querySelector("#cameraCount")
        $cameraRed = document.querySelector("#cameraRed")
        $cameraBlue = document.querySelector("#cameraBlue");

    $banner.style.display = "block";

    let people = chatStatistics.UserCount === 1 ? 'person' : 'people';
    let isAre = chatStatistics.UserCount === 1 ? 'is' : 'are';
    $usersOnline.innerHTML = `There ${isAre} currently <strong>${chatStatistics.UserCount}</strong> ${people}</span> in the chat room`;
    $whoList.innerHTML = chatStatistics.Usernames.join(", ");

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

    // Camera stats too?
    if (chatStatistics.Cameras.Blue + chatStatistics.Cameras.Red > 0) {
        let count = chatStatistics.Cameras.Blue + chatStatistics.Cameras.Red;
        $cameraStats.style.display = "block";
        $cameraCount.innerHTML = `<strong>${count} webcam${count === 1 ? '</strong> is' : 's</strong> are'} active`;
        $cameraRed.innerHTML = chatStatistics.Cameras.Red;
        $cameraBlue.innerHTML = chatStatistics.Cameras.Blue;
    }
}
window.addEventListener("DOMContentLoaded", () => {
    let url = "{{.ChatAPI}}",
        ChatStatistics = {{.ChatStatistics}},
        $banner = document.querySelector("#chatStatsBanner"),
        $whoLink = document.querySelector("#whoLink"),
        $whoList = document.querySelector("#whoList"),
        $usersOnline = document.querySelector("#usersOnline");

    // If we already know people are online, show the banner immediately while we refresh from live data
    if (ChatStatistics.UserCount > 0) {
        showWhoBanner(ChatStatistics);
    }

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

    fetch(url, {
        mode: 'cors',
        cache: 'no-cache',
    }).then(resp => resp.json()).then(result => {
        showWhoBanner(result);
    }).catch(console.error);
});
</script>
{{end}}