246 lines
11 KiB
HTML
246 lines
11 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 .CurrentUser.IsBirthday}}
|
|
<div class="notification is-success is-light content">
|
|
<h2>🎂 Happy birthday!</h2>
|
|
|
|
<p>
|
|
If you would like, you may enter the chat room with a special 🍰 birthday cake emoji next to
|
|
your username instead of the usual country flag. This is totally optional and you may do this
|
|
by clicking the button <em>below</em> to enter the chat room:
|
|
</p>
|
|
|
|
<p>
|
|
<a href="/chat?intent=join&birthday=true" class="button" target="_blank">
|
|
🍰 Join the Chat Room
|
|
</a>
|
|
<a href="/chat?intent=join" class="button ml-2" target="_blank">
|
|
No thanks; join the chat normally
|
|
</a>
|
|
</p>
|
|
</div>
|
|
{{end}}
|
|
|
|
{{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>
|
|
|
|
<!-- Friends online? -->
|
|
{{if .FriendsOnline}}
|
|
<div class="mt-2">
|
|
<i class="fa fa-user-group mr-1"></i>
|
|
<strong>{{len .FriendsOnline}} friend{{Pluralize (len .FriendsOnline)}}</strong>
|
|
{{Pluralize (len .FriendsOnline) "is" "are"}} currently online:
|
|
{{$FriendsOnline := .FriendsOnline}}
|
|
{{range $i, $name := .FriendsOnline -}}
|
|
{{- if $i -}}, {{end}}<a href="/u/{{ $name }}">{{ $name }}</a>
|
|
{{- end}}
|
|
</div>
|
|
{{end}}
|
|
|
|
<!-- Camera stats if active -->
|
|
<div id="cameraStats" style="display: none" class="mt-2">
|
|
<i class="fa fa-camera mr-1"></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>
|
|
|
|
<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 has-text-danger"></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. Remember: <strong>consent is sexy!</strong>
|
|
</li>
|
|
<li>
|
|
<i class="fa fa-exclamation-triangle has-text-danger mr-1"></i>
|
|
The following sorts of activities will get you <strong class="has-text-danger">removed from the chat room</strong>:
|
|
<ol>
|
|
<li class="mb-4">
|
|
If a moderator marks your camera as <span class="has-text-danger"><i class="fa fa-fire mr-1"></i> Explicit</span>
|
|
on your behalf, and you fight them and mark your camera blue again. Don't be offended that your cam was marked as
|
|
Explicit if you're on there jerking off. Remember: it's a courtesy to others -- your red camera lets people know you're
|
|
probably jerking off in case someone doesn't want to see that.<br><br>
|
|
If you fight the moderator's decision to flag your camera, you may be kicked or (temporarily) banned from the chat room.
|
|
</li>
|
|
<li class="mb-4">
|
|
If you boot moderators <em>off</em> of watching your camera <em>so that</em> you can violate the previous rule (and
|
|
jerk off with your camera still on blue), this may result in an immediate (temporary) ban from the chat room. If you
|
|
make a pattern of this, you may be removed from the {{PrettyTitle}} website completely.
|
|
</li>
|
|
<li>
|
|
Breaking the <a href="/tos">global website rules</a> or doing something illegal on chat will naturally result in a
|
|
swift ban from the chat room and possibly a ban of your website account altogether depending on the severity of the
|
|
incident.
|
|
</li>
|
|
</ol>
|
|
</li>
|
|
</ul>
|
|
|
|
<p>
|
|
* 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 people can know what they're
|
|
getting into before they open your cam, in case someone prefers <em>not</em> to just see some
|
|
guy jerking off.
|
|
</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>
|
|
|
|
<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 !== null ? 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;
|
|
}
|
|
|
|
$whoLink.addEventListener("click", (e) => {
|
|
e.preventDefault();
|
|
$whoLink.style.display = "none";
|
|
$whoList.style.display = "";
|
|
});
|
|
}
|
|
window.addEventListener("DOMContentLoaded", () => {
|
|
let ChatStatistics = {{.ChatStatistics}},
|
|
$banner = document.querySelector("#chatStatsBanner"),
|
|
$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);
|
|
}
|
|
});
|
|
</script>
|
|
{{end}}
|