Setting to collapse image shares by default
This commit is contained in:
parent
af35ac9ed6
commit
9cbf9e664d
|
|
@ -59,6 +59,11 @@ const app = Vue.createApp({
|
||||||
[ "x3", "3x larger chat room text" ],
|
[ "x3", "3x larger chat room text" ],
|
||||||
[ "x4", "4x 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: [
|
reportClassifications: [
|
||||||
"It's spam",
|
"It's spam",
|
||||||
"It's abusive (racist, homophobic, etc.)",
|
"It's abusive (racist, homophobic, etc.)",
|
||||||
|
|
@ -197,6 +202,7 @@ const app = Vue.createApp({
|
||||||
historyScrollbox: null,
|
historyScrollbox: null,
|
||||||
autoscroll: true, // scroll to bottom on new messages
|
autoscroll: true, // scroll to bottom on new messages
|
||||||
fontSizeClass: "", // font size magnification
|
fontSizeClass: "", // font size magnification
|
||||||
|
imageDisplaySetting: "", // image show/hide setting
|
||||||
scrollback: 1000, // scrollback buffer (messages to keep per channel)
|
scrollback: 1000, // scrollback buffer (messages to keep per channel)
|
||||||
DMs: {},
|
DMs: {},
|
||||||
messageReactions: {
|
messageReactions: {
|
||||||
|
|
@ -325,6 +331,9 @@ const app = Vue.createApp({
|
||||||
// Store the setting persistently.
|
// Store the setting persistently.
|
||||||
localStorage.fontSizeClass = this.fontSizeClass;
|
localStorage.fontSizeClass = this.fontSizeClass;
|
||||||
},
|
},
|
||||||
|
imageDisplaySetting() {
|
||||||
|
localStorage.imageDisplaySetting = this.imageDisplaySetting;
|
||||||
|
},
|
||||||
scrollback() {
|
scrollback() {
|
||||||
localStorage.scrollback = this.scrollback;
|
localStorage.scrollback = this.scrollback;
|
||||||
},
|
},
|
||||||
|
|
@ -514,6 +523,10 @@ const app = Vue.createApp({
|
||||||
this.webcam.videoScale = localStorage.videoScale;
|
this.webcam.videoScale = localStorage.videoScale;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
if (localStorage.imageDisplaySetting != undefined) {
|
||||||
|
this.imageDisplaySetting = localStorage.imageDisplaySetting;
|
||||||
|
}
|
||||||
|
|
||||||
if (localStorage.scrollback != undefined) {
|
if (localStorage.scrollback != undefined) {
|
||||||
this.scrollback = parseInt(localStorage.scrollback);
|
this.scrollback = parseInt(localStorage.scrollback);
|
||||||
}
|
}
|
||||||
|
|
@ -1918,6 +1931,27 @@ const app = Vue.createApp({
|
||||||
// Initialize this channel's history?
|
// Initialize this channel's history?
|
||||||
this.initHistory(channel);
|
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.
|
// Append the message.
|
||||||
this.channels[channel].updated = new Date().getTime();
|
this.channels[channel].updated = new Date().getTime();
|
||||||
this.channels[channel].history.push({
|
this.channels[channel].history.push({
|
||||||
|
|
|
||||||
|
|
@ -137,6 +137,27 @@
|
||||||
</div>
|
</div>
|
||||||
</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">
|
<div class="field">
|
||||||
<label class="label">Scrollback buffer</label>
|
<label class="label">Scrollback buffer</label>
|
||||||
<div class="control">
|
<div class="control">
|
||||||
|
|
@ -153,35 +174,6 @@
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</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>
|
</div>
|
||||||
|
|
||||||
<!-- Sound settings -->
|
<!-- Sound settings -->
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue
Block a user