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

Setting to collapse image shares by default

Browse Source
This commit is contained in:
Noah 2023-08-14 19:59:35 -07:00
parent af35ac9ed6
commit 9cbf9e664d
2 changed files with 55 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/static/js/BareRTC.js
View File

@ -59,6 +59,11 @@ const app = Vue.createApp({
[ "x3", "3x larger chat room text" ],
[ "x4", "4x larger chat room text" ],
],
imageDisplaySettings: [
[ "", "Always show images in chat (default)" ],
[ "collapse", "Collapse images in chat (clicking to expand)" ],
[ "hide", "Never show images shared in chat" ],
],
reportClassifications: [
"It's spam",
"It's abusive (racist, homophobic, etc.)",
@ -197,6 +202,7 @@ const app = Vue.createApp({
historyScrollbox: null,
autoscroll: true, // scroll to bottom on new messages
fontSizeClass: "", // font size magnification
imageDisplaySetting: "", // image show/hide setting
scrollback: 1000, // scrollback buffer (messages to keep per channel)
DMs: {},
messageReactions: {
@ -325,6 +331,9 @@ const app = Vue.createApp({
// Store the setting persistently.
localStorage.fontSizeClass = this.fontSizeClass;
},
imageDisplaySetting() {
localStorage.imageDisplaySetting = this.imageDisplaySetting;
},
scrollback() {
localStorage.scrollback = this.scrollback;
},
@ -514,6 +523,10 @@ const app = Vue.createApp({
this.webcam.videoScale = localStorage.videoScale;
}
if (localStorage.imageDisplaySetting != undefined) {
this.imageDisplaySetting = localStorage.imageDisplaySetting;
}
if (localStorage.scrollback != undefined) {
this.scrollback = parseInt(localStorage.scrollback);
}
@ -1918,6 +1931,27 @@ const app = Vue.createApp({
// Initialize this channel's history?
this.initHistory(channel);
// Image handling per the user's preference.
if (message.indexOf("<img") > -1) {
if (this.imageDisplaySetting === "hide") {
return;
} else if (this.imageDisplaySetting === "collapse") {
// Put a collapser link.
let collapseID = `collapse-${messageID}`;
message = `
<a href="#" id="img-show-${collapseID}"
class="button is-outlined is-small is-info"
onclick="document.querySelector('#img-${collapseID}').style.display = 'block';
document.querySelector('#img-show-${collapseID}').style.display = 'none';
return false">
<i class="fa fa-image mr-1"></i>
Image attachment - click to expand
</a>
<div id="img-${collapseID}" style="display: none">${message}</div>`;
}
}
// Append the message.
this.channels[channel].updated = new Date().getTime();
this.channels[channel].history.push({

50
web/templates/chat.html
View File

@ -137,6 +137,27 @@
</div>
</div>
<div class="field is-horizontal">
<div class="field-label is-normal">
<label class="label">Images</label>
</div>
<div class="field-body">
<div class="field">
<div class="control">
<div class="select is-fullwidth">
<select v-model="imageDisplaySetting">
<option v-for="s in config.imageDisplaySettings"
v-bind:key="s[0]"
:value="s[0]">
[[ s[1] ]]
</option>
</select>
</div>
</div>
</div>
</div>
</div>
<div class="field">
<label class="label">Scrollback buffer</label>
<div class="control">
@ -153,35 +174,6 @@
</p>
</div>
<h3 class="subtitle mb-2" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
Webcam Devices
</h3>
<div class="columns is-mobile" v-if="webcam.videoDevices.length > 0 || webcam.audioDevices.length > 0">
<div class="column">
<label class="label">Video source</label>
<div class="select is-fullwidth">
<select v-model="webcam.videoDeviceID" @change="startVideo({changeCamera: true, force: true})">
<option v-for="(d, i) in webcam.videoDevices"
:value="d.id">
[[ d.label || `Camera ${i}` ]]
</option>
</select>
</div>
</div>
<div class="column">
<label class="label">Audio source</label>
<div class="select is-fullwidth">
<select v-model="webcam.audioDeviceID" @change="startVideo({changeCamera: true, force: true})">
<option v-for="(d, i) in webcam.audioDevices"
:value="d.id">
[[ d.label || `Microphone ${i}` ]]
</option>
</select>
</div>
</div>
</div>
</div>
<!-- Sound settings -->