apps/BareRTC
1
0
Fork 0
Code Issues 14 Pull Requests Packages Projects Releases Wiki Activity

Update DM disclaimer at top of page

Browse Source
This commit is contained in:
Noah 2023-11-26 20:49:54 -08:00
parent 2cf4e5cc27
commit 538347ebc7
2 changed files with 89 additions and 104 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

61
src/App.vue
View File

@ -3561,10 +3561,10 @@ export default {
</div> </div>
<!-- <!--
Device Pickers: just in case the user had granted video permission in the past, Device Pickers: just in case the user had granted video permission in the past,
and we are able to enumerate their device names, we can show them here before they and we are able to enumerate their device names, we can show them here before they
go on this time. go on this time.
--> -->
<div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0"> <div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
<div class="column"> <div class="column">
@ -3876,17 +3876,17 @@ export default {
<!-- Debugging - copy a lot of these to simulate more videos --> <!-- Debugging - copy a lot of these to simulate more videos -->
<!-- <div class="feed"> <!-- <div class="feed">
hi hi
</div> </div>
<div class="feed"> <div class="feed">
hi hi
</div> </div>
<div class="feed"> <div class="feed">
hi hi
</div> </div>
<div class="feed"> <div class="feed">
hi hi
</div> --> </div> -->
</div> </div>
<div class="card-content" id="chatHistory" :class="{ <div class="card-content" id="chatHistory" :class="{
@ -3906,10 +3906,31 @@ export default {
<!-- Disclaimer at the top of DMs --> <!-- Disclaimer at the top of DMs -->
<!-- TODO: make this disclaimer configurable for other sites to modify --> <!-- TODO: make this disclaimer configurable for other sites to modify -->
<div class="notification is-warning is-light" v-if="isDM"> <div class="notification is-warning is-light" v-if="isDM">
<i class="fa fa-info-circle mr-1"></i> <!-- If reporting is enabled -->
<strong>Reminder:</strong> please conduct yourself honorably in Direct Messages. <div v-if="isWebhookEnabled('report')">
Please refer to <span v-html="config.branding"></span>'s Privacy Policy or Terms of Service with <div class="block">
regard to DMs. <i class="fa fa-info-circle mr-1"></i>
<strong>PSA:</strong> If you see something, say something!
</div>
<div class="block">
If you encounter an inappropriate, abusive or criminal message in chat, please flag it
by clicking the red
<i class="fa fa-flag has-text-danger mx-1"></i> icon to report the message and
let your website administrator know. Server-side chat filters are engaged
to help flag messages automatically, but we appreciate our members helping to flag
messages in case the automated filters missed any.
</div>
<div class="block">
Do your part to help keep this website great! <i class="fa-regular fa-star"></i>
</div>
</div>
<div v-else>
<i class="fa fa-info-circle mr-1"></i>
<strong>Reminder:</strong> please conduct yourself honorably in Direct Messages.
Please refer to <span v-html="config.branding"></span>'s Privacy Policy or Terms of Service
with
regard to DMs.
</div>
</div> </div>
<!-- No history? --> <!-- No history? -->
@ -4004,7 +4025,7 @@ export default {
</div> </div>
<div class="dropdown-menu" id="input-emoji-picker" role="menu" style="z-index: 9000"> <div class="dropdown-menu" id="input-emoji-picker" role="menu" style="z-index: 9000">
<!-- Note: z-index so the popup isn't covered by the "Auto-scroll" <!-- Note: z-index so the popup isn't covered by the "Auto-scroll"
label on the chat history panel --> label on the chat history panel -->
<div class="dropdown-content p-0"> <div class="dropdown-content p-0">
<EmojiPicker :native="true" :display-recent="true" :disable-skin-tones="true" <EmojiPicker :native="true" :display-recent="true" :disable-skin-tones="true"
theme="auto" @select="onSelectEmoji"> theme="auto" @select="onSelectEmoji">

132
src/components/MessageBox.vue
View File

@ -179,9 +179,7 @@ export default {
<!-- Tiny avatar next to name and action buttons --> <!-- Tiny avatar next to name and action buttons -->
<div class="columns is-mobile"> <div class="columns is-mobile">
<div class="column is-narrow pr-0 pt-4"> <div class="column is-narrow pr-0 pt-4">
<a :href="profileURL" <a :href="profileURL" @click.prevent="openProfile()" :class="{ 'cursor-default': !profileURL }">
@click.prevent="openProfile()"
:class="{ 'cursor-default': !profileURL }">
<figure class="image is-16x16"> <figure class="image is-16x16">
<img v-if="avatarURL" :src="avatarURL"> <img v-if="avatarURL" :src="avatarURL">
<img v-else src="/static/img/shy.png"> <img v-else src="/static/img/shy.png">
@ -209,13 +207,11 @@ export default {
<div v-else-if="appearance === 'cards' || !appearance" class="box mb-2 px-4 pt-3 pb-1 position-relative"> <div v-else-if="appearance === 'cards' || !appearance" class="box mb-2 px-4 pt-3 pb-1 position-relative">
<div class="media mb-0"> <div class="media mb-0">
<div class="media-left"> <div class="media-left">
<a :href="profileURL" <a :href="profileURL" @click.prevent="openProfile()">
@click.prevent="openProfile()">
<figure class="image is-48x48"> <figure class="image is-48x48">
<img v-if="message.isChatServer" src="/static/img/server.png"> <img v-if="message.isChatServer" src="/static/img/server.png">
<img v-else-if="message.isChatClient" src="/static/img/client.png"> <img v-else-if="message.isChatClient" src="/static/img/client.png">
<img v-else-if="avatarURL" <img v-else-if="avatarURL" :src="avatarURL">
:src="avatarURL">
<img v-else src="/static/img/shy.png"> <img v-else src="/static/img/shy.png">
</figure> </figure>
</a> </a>
@ -245,9 +241,7 @@ export default {
<div class="columns is-mobile pt-0" v-if="(message.isChatClient || message.isChatServer)"> <div class="columns is-mobile pt-0" v-if="(message.isChatClient || message.isChatServer)">
<div class="column is-narrow pt-0"> <div class="column is-narrow pt-0">
<small v-if="!(message.isChatClient || message.isChatServer)"> <small v-if="!(message.isChatClient || message.isChatServer)">
<a v-if="profileURL" <a v-if="profileURL" :href="profileURL" target="_blank" @click.prevent="openProfile()"
:href="profileURL" target="_blank"
@click.prevent="openProfile()"
class="has-text-grey"> class="has-text-grey">
@{{ message.username }} @{{ message.username }}
</a> </a>
@ -259,9 +253,7 @@ export default {
<div v-else class="columns is-mobile pt-0"> <div v-else class="columns is-mobile pt-0">
<div class="column is-narrow pt-0"> <div class="column is-narrow pt-0">
<small v-if="!(message.isChatClient || message.isChatServer)"> <small v-if="!(message.isChatClient || message.isChatServer)">
<a :href="profileURL || '#'" <a :href="profileURL || '#'" target="_blank" @click.prevent="openProfile()"
target="_blank"
@click.prevent="openProfile()"
class="has-text-grey"> class="has-text-grey">
@{{ message.username }} @{{ message.username }}
</a> </a>
@ -269,12 +261,10 @@ export default {
<small v-else class="has-text-grey">internal</small> <small v-else class="has-text-grey">internal</small>
</div> </div>
<div class="column is-narrow pl-1 pt-0" <div class="column is-narrow pl-1 pt-0" v-if="!noButtons">
v-if="!noButtons">
<!-- DMs button --> <!-- DMs button -->
<button type="button" v-if="!(message.username === username || isDm)" <button type="button" v-if="!(message.username === username || isDm)"
class="button is-grey is-outlined is-small px-2" class="button is-grey is-outlined is-small px-2" @click="openDMs()"
@click="openDMs()"
:title="isDnd ? 'This person is not accepting new DMs' : 'Open a Direct Message (DM) thread'" :title="isDnd ? 'This person is not accepting new DMs' : 'Open a Direct Message (DM) thread'"
:disabled="isDnd"> :disabled="isDnd">
<i class="fa fa-comment"></i> <i class="fa fa-comment"></i>
@ -282,8 +272,7 @@ export default {
<!-- Mute button --> <!-- Mute button -->
<button type="button" v-if="!(message.username === username)" <button type="button" v-if="!(message.username === username)"
class="button is-grey is-outlined is-small px-2 ml-1" class="button is-grey is-outlined is-small px-2 ml-1" @click="muteUser()" title="Mute user">
@click="muteUser()" title="Mute user">
<i class="fa fa-comment-slash" :class="{ <i class="fa fa-comment-slash" :class="{
'has-text-success': isMuted, 'has-text-success': isMuted,
'has-text-danger': !isMuted 'has-text-danger': !isMuted
@ -293,16 +282,14 @@ export default {
<!-- Owner or admin: take back the message --> <!-- Owner or admin: take back the message -->
<button type="button" v-if="message.username === username || isOp" <button type="button" v-if="message.username === username || isOp"
class="button is-grey is-outlined is-small px-2 ml-1" class="button is-grey is-outlined is-small px-2 ml-1"
title="Take back this message (delete it for everybody)" title="Take back this message (delete it for everybody)" @click="takeback()">
@click="takeback()">
<i class="fa fa-rotate-left has-text-danger"></i> <i class="fa fa-rotate-left has-text-danger"></i>
</button> </button>
<!-- Everyone else: can hide it locally --> <!-- Everyone else: can hide it locally -->
<button type="button" v-if="message.username !== username" <button type="button" v-if="message.username !== username"
class="button is-grey is-outlined is-small px-2 ml-1" class="button is-grey is-outlined is-small px-2 ml-1"
title="Hide this message (delete it only for your view)" title="Hide this message (delete it only for your view)" @click="removeMessage()">
@click="removeMessage()">
<i class="fa fa-trash"></i> <i class="fa fa-trash"></i>
</button> </button>
</div> </div>
@ -317,19 +304,18 @@ export default {
<button class="button is-small is-outlined mr-1" :class="{ <button class="button is-small is-outlined mr-1" :class="{
'is-danger': !message.reported, 'is-danger': !message.reported,
'has-text-grey': message.reported 'has-text-grey': message.reported
}" title="Report this message" }" title="Report this message" @click="reportMessage()">
@click="reportMessage()">
<i class="fa fa-flag"></i> <i class="fa fa-flag"></i>
<i class="fa fa-check ml-1" v-if="message.reported"></i> <i class="fa fa-check ml-1" v-if="message.reported"></i>
</button> </button>
</div> </div>
<div class="column dropdown is-right" :class="{ 'is-up': position >= 2, 'is-active': showEmojiPicker }" <div class="column dropdown is-right"
@click="showEmojiPicker=true"> :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': showEmojiPicker }"
@click="showEmojiPicker = true">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button type="button" class="button is-small px-2" aria-haspopup="true" <button type="button" class="button is-small px-2" aria-haspopup="true"
:aria-controls="`react-menu-${message.msgID}`" :aria-controls="`react-menu-${message.msgID}`" @click="hideEmojiPicker()">
@click="hideEmojiPicker()">
<span> <span>
<i class="fa fa-heart has-text-grey"></i> <i class="fa fa-heart has-text-grey"></i>
<i class="fa fa-plus has-text-grey pl-1"></i> <i class="fa fa-plus has-text-grey pl-1"></i>
@ -339,15 +325,9 @@ export default {
<div class="dropdown-menu" :id="`react-menu-${message.msgID}`" role="menu"> <div class="dropdown-menu" :id="`react-menu-${message.msgID}`" role="menu">
<div class="dropdown-content p-0"> <div class="dropdown-content p-0">
<!-- Emoji reactions menu --> <!-- Emoji reactions menu -->
<EmojiPicker <EmojiPicker v-if="showEmojiPicker" :native="true" :display-recent="true" :disable-skin-tones="true"
v-if="showEmojiPicker" :additional-groups="customEmojiGroups" :group-names="{ frequently_used: 'Frequently Used' }"
:native="true" theme="auto" @select="onSelectEmoji"></EmojiPicker>
:display-recent="true"
:disable-skin-tones="true"
:additional-groups="customEmojiGroups"
:group-names="{ frequently_used: 'Frequently Used' }"
theme="auto"
@select="onSelectEmoji"></EmojiPicker>
</div> </div>
</div> </div>
</div> </div>
@ -360,9 +340,7 @@ export default {
<!-- Reactions so far? --> <!-- Reactions so far? -->
<div v-if="hasReactions" class="mt-1"> <div v-if="hasReactions" class="mt-1">
<span v-for="(users, emoji) in reactions" <span v-for="(users, emoji) in reactions" v-bind:key="emoji" class="tag is-secondary mr-1 cursor-pointer"
v-bind:key="emoji"
class="tag is-secondary mr-1 cursor-pointer"
:class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }" :class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }"
:title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)"> :title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)">
{{ emoji }} <small class="ml-1">{{ users.length }}</small> {{ emoji }} <small class="ml-1">{{ users.length }}</small>
@ -381,9 +359,7 @@ export default {
<!-- Avatar icon --> <!-- Avatar icon -->
<div class="column is-narrow px-1"> <div class="column is-narrow px-1">
<a :href="profileURL" <a :href="profileURL" @click.prevent="openProfile()" class="p-0">
@click.prevent="openProfile()"
class="p-0">
<img v-if="avatarURL" :src="avatarURL" width="16" height="16" alt=""> <img v-if="avatarURL" :src="avatarURL" width="16" height="16" alt="">
<img v-else src="/static/img/shy.png" width="16" height="16"> <img v-else src="/static/img/shy.png" width="16" height="16">
</a> </a>
@ -392,31 +368,27 @@ export default {
<!-- Name/username/message --> <!-- Name/username/message -->
<div class="column px-1"> <div class="column px-1">
<div class="content mb-2"> <div class="content mb-2">
<strong <strong :class="{
:class="{ 'has-text-success is-dark': message.isChatServer,
'has-text-success is-dark': message.isChatServer, 'has-text-warning is-dark': message.isAdmin,
'has-text-warning is-dark': message.isAdmin, 'has-text-danger': message.isChatClient
'has-text-danger': message.isChatClient }">
}"> [<a :href="profileURL" @click.prevent="openProfile()" class="has-text-dark"
[<a :href="profileURL"
@click.prevent="openProfile()"
class="has-text-dark"
:class="{ 'cursor-default': !profileURL }"> :class="{ 'cursor-default': !profileURL }">
<!-- Display name? --> <!-- Display name? -->
<span v-if="(message.isChatServer || message.isChatClient || message.isAdmin) <span v-if="(message.isChatServer || message.isChatClient || message.isAdmin)
|| (appearance === 'compact' && nickname !== message.username)" || (appearance === 'compact' && nickname !== message.username)" :class="{
:class="{ 'has-text-success is-dark': message.isChatServer,
'has-text-success is-dark': message.isChatServer, 'has-text-warning is-dark': message.isAdmin,
'has-text-warning is-dark': message.isAdmin, 'has-text-danger': message.isChatClient
'has-text-danger': message.isChatClient }">
}">
{{ nickname }} {{ nickname }}
</span> </span>
<small class="has-text-grey" <small class="has-text-grey"
:class="{'ml-1': appearance === 'compact' && nickname !== message.username}" :class="{ 'ml-1': appearance === 'compact' && nickname !== message.username }"
v-if="!(message.isChatServer || message.isChatClient || message.isAdmin)" v-if="!(message.isChatServer || message.isChatClient || message.isAdmin)">@{{ message.username
>@{{ message.username }}</small> }}</small>
</a>] </a>]
</strong> </strong>
@ -425,9 +397,7 @@ export default {
<!-- Reactions so far? --> <!-- Reactions so far? -->
<div v-if="hasReactions" class="mb-2"> <div v-if="hasReactions" class="mb-2">
<span v-for="(users, emoji) in reactions" <span v-for="(users, emoji) in reactions" v-bind:key="emoji" class="tag is-secondary mr-1 cursor-pointer"
v-bind:key="emoji"
class="tag is-secondary mr-1 cursor-pointer"
:class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }" :class="{ 'is-success is-light': iReacted(msg, emoji), 'is-secondary': !iReacted(msg, emoji) }"
:title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)"> :title="emoji + ' by: ' + users.join(', ')" @click="sendReact(emoji)">
{{ emoji }} <small class="ml-1">{{ users.length }}</small> {{ emoji }} <small class="ml-1">{{ users.length }}</small>
@ -440,8 +410,9 @@ export default {
<div class="columns is-mobile is-gapless mb-0"> <div class="columns is-mobile is-gapless mb-0">
<!-- More buttons menu (DM, mute, report, etc.) --> <!-- More buttons menu (DM, mute, report, etc.) -->
<div class="column dropdown is-right" :class="{ 'is-up': position >= 2, 'is-active': menuVisible }" <div class="column dropdown is-right"
@click="menuVisible=!menuVisible"> :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': menuVisible }"
@click="menuVisible = !menuVisible">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button type="button" class="button is-small px-2 mr-1" aria-haspopup="true" <button type="button" class="button is-small px-2 mr-1" aria-haspopup="true"
:aria-controls="`msg-menu-${message.msgID}`"> :aria-controls="`msg-menu-${message.msgID}`">
@ -482,8 +453,7 @@ export default {
<!-- Report button --> <!-- Report button -->
<a href="#" class="dropdown-item" v-if="reportEnabled && message.username !== username" <a href="#" class="dropdown-item" v-if="reportEnabled && message.username !== username"
@click.prevent="reportMessage()"> @click.prevent="reportMessage()">
<i class="fa fa-flag mr-1" <i class="fa fa-flag mr-1" :class="{ 'has-text-danger': !message.reported }"></i>
:class="{'has-text-danger': !message.reported}"></i>
<span v-if="message.reported">Reported</span> <span v-if="message.reported">Reported</span>
<span v-else>Report</span> <span v-else>Report</span>
</a> </a>
@ -492,12 +462,12 @@ export default {
</div> </div>
<!-- Emoji reactions --> <!-- Emoji reactions -->
<div class="column dropdown is-right" :class="{ 'is-up': position >= 2, 'is-active': showEmojiPicker }" <div class="column dropdown is-right"
@click="showEmojiPicker=true"> :class="{ 'is-up': position >= 2 || reportEnabled, 'is-active': showEmojiPicker }"
@click="showEmojiPicker = true">
<div class="dropdown-trigger"> <div class="dropdown-trigger">
<button type="button" class="button is-small px-2" aria-haspopup="true" <button type="button" class="button is-small px-2" aria-haspopup="true"
:aria-controls="`react-menu-${message.msgID}`" :aria-controls="`react-menu-${message.msgID}`" @click="hideEmojiPicker()">
@click="hideEmojiPicker()">
<small> <small>
<i class="fa fa-heart has-text-grey"></i> <i class="fa fa-heart has-text-grey"></i>
</small> </small>
@ -506,15 +476,10 @@ export default {
<div class="dropdown-menu" :id="`react-menu-${message.msgID}`" role="menu"> <div class="dropdown-menu" :id="`react-menu-${message.msgID}`" role="menu">
<div class="dropdown-content p-0"> <div class="dropdown-content p-0">
<!-- Emoji reactions menu --> <!-- Emoji reactions menu -->
<EmojiPicker <EmojiPicker v-if="showEmojiPicker" :native="true" :display-recent="true"
v-if="showEmojiPicker" :disable-skin-tones="true" :additional-groups="customEmojiGroups"
:native="true" :group-names="{ frequently_used: 'Frequently Used' }" theme="auto" @select="onSelectEmoji">
:display-recent="true" </EmojiPicker>
:disable-skin-tones="true"
:additional-groups="customEmojiGroups"
:group-names="{ frequently_used: 'Frequently Used' }"
theme="auto"
@select="onSelectEmoji"></EmojiPicker>
</div> </div>
</div> </div>
</div> </div>
@ -524,5 +489,4 @@ export default {
</div> </div>
</template> </template>
<style scoped> <style scoped></style>
</style>