202 lines
8.7 KiB
HTML
202 lines
8.7 KiB
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 & 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 & 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}} |