parent
3c60ad4f14
commit
a78659b206
43 changed files with 402 additions and 288 deletions
|
|
@ -115,71 +115,3 @@ export default {
|
|||
<style lang="scss">
|
||||
@import "@/assets/css/chat.scss";
|
||||
</style>
|
||||
|
||||
|
||||
|
||||
function playPauseAudio() {
|
||||
if (player.src) {
|
||||
if (player.paused || player.ended) {
|
||||
// Change the button to a pause button
|
||||
changeButtonType(btnPlayPause, 'pause');
|
||||
player.play();
|
||||
}
|
||||
else {
|
||||
// Change the button to a play button
|
||||
changeButtonType(btnPlayPause, 'play');
|
||||
player.pause();
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Stop the current media from playing, and return it to the start position
|
||||
function stopAudio() {
|
||||
if (player.src) {
|
||||
player.pause();
|
||||
if (player.currentTime) player.currentTime = 0;
|
||||
}
|
||||
}
|
||||
|
||||
// Toggles the media player's mute and unmute status
|
||||
function muteVolume() {
|
||||
if (player.src) {
|
||||
if (player.muted) {
|
||||
// Change the button to a mute button
|
||||
changeButtonType(btnMute, 'mute');
|
||||
player.muted = false;
|
||||
}
|
||||
else {
|
||||
// Change the button to an unmute button
|
||||
changeButtonType(btnMute, 'unmute');
|
||||
player.muted = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Replays the media currently loaded in the player
|
||||
function replayAudio() {
|
||||
if (player.src) {
|
||||
resetPlayer();
|
||||
player.play();
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
// Updates a button's title, innerHTML and CSS class
|
||||
function changeButtonType(btn, value) {
|
||||
btn.title = value;
|
||||
btn.innerHTML = value;
|
||||
btn.className = value;
|
||||
}
|
||||
|
||||
function resetPlayer() {
|
||||
progressBar.value = 0;
|
||||
//clear the current song
|
||||
player.src = '';
|
||||
// Move the media back to the start
|
||||
player.currentTime = 0;
|
||||
// Set the play/pause button to 'play'
|
||||
changeButtonType(btnPlayPause, 'play');
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -7,7 +7,7 @@
|
|||
}"
|
||||
>
|
||||
<v-btn v-if="incoming" text @click.stop="startPrivateChat" class="ma-0 pa-0"
|
||||
>Private chat with this user</v-btn
|
||||
>{{ $t("menu.start_private_chat") }}</v-btn
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -2,10 +2,10 @@
|
|||
<!-- Contact joined the chat -->
|
||||
<div class="messageJoin">
|
||||
<div v-if="displayNameChange">
|
||||
{{ changer }} changed display name to {{ event.getContent().displayname }}
|
||||
{{ $t('message.user_changed_display_name', { user: changer, displayName: event.getContent().displayname})}}
|
||||
</div>
|
||||
<div v-if="avatarChange">
|
||||
{{ changer }} changed the avatar
|
||||
{{ $t('message.user_changed_avatar', { user: changer})}}
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -28,7 +28,7 @@ export default {
|
|||
},
|
||||
changer() {
|
||||
if (this.event.getSender() == this.$matrix.currentUserId) {
|
||||
return "You";
|
||||
return this.$t("message.you");
|
||||
}
|
||||
if (this.displayNameChange) {
|
||||
return this.event.getPrevContent().displayname;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- Contact invited to the chat -->
|
||||
<div class="messageJoin">
|
||||
{{ event.getContent().displayname || stateEventDisplayName(event) }} was invited to the chat...
|
||||
{{ $t('message.user_was_invited', {user: event.getContent().displayname || stateEventDisplayName(event)}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- Contact joined the chat -->
|
||||
<div class="messageJoin">
|
||||
{{ stateEventDisplayName(event) }} joined the chat
|
||||
{{ $t('message.user_joined',{user: stateEventDisplayName(event)}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- Contact left the chat -->
|
||||
<div class="messageJoin">
|
||||
{{ stateEventDisplayName(event) }} left the chat
|
||||
{{ $t('message.user_left',{user: stateEventDisplayName(event)}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<message-incoming v-bind="{...$props, ...$attrs}" v-on="$listeners">
|
||||
<div class="bubble audio-bubble">
|
||||
<audio-player :src="src">Audio file</audio-player>
|
||||
<audio-player :src="src">{{ $t('fallbacks.audio_file')}}</audio-player>
|
||||
</div>
|
||||
</message-incoming>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="bubble">
|
||||
<div class="original-message" v-if="inReplyToText">
|
||||
<div class="original-message-sender">
|
||||
{{ inReplyToSender || "Someone" }} said:
|
||||
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
|
||||
</div>
|
||||
<div
|
||||
class="original-message-text"
|
||||
|
|
@ -11,14 +11,14 @@
|
|||
/>
|
||||
</div>
|
||||
<div class="message">
|
||||
<span>File: </span>
|
||||
<span>{{ $t('file_prefix') }}</span>
|
||||
<span
|
||||
style="cursor: pointer"
|
||||
@click.stop="$emit('download')"
|
||||
v-html="linkify($sanitize(messageText))"
|
||||
/>
|
||||
<span class="edit-marker" v-if="event.replacingEventId()"
|
||||
>(edited)</span
|
||||
>{{ $t('edited') }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="bubble">
|
||||
<div class="original-message" v-if="inReplyToText">
|
||||
<div class="original-message-sender">
|
||||
{{ inReplyToSender || "Someone" }} said:
|
||||
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
|
||||
</div>
|
||||
<div
|
||||
class="original-message-text"
|
||||
|
|
@ -13,7 +13,7 @@
|
|||
<div class="message">
|
||||
<span v-html="linkify($sanitize(messageText))" />
|
||||
<span class="edit-marker" v-if="event.replacingEventId()"
|
||||
>(edited)</span
|
||||
>{{ $t('edited') }}</span
|
||||
>
|
||||
</div>
|
||||
<!-- <div>{{ JSON.stringify(event) }}</div> -->
|
||||
|
|
|
|||
|
|
@ -3,11 +3,11 @@
|
|||
<div class="bubble image-bubble">
|
||||
<v-responsive :aspect-ratio="16 / 9" :src="src">
|
||||
<video :src="src" controls style="width: 100%; height: 100%">
|
||||
Video file
|
||||
{{$t('fallbacks.video_file')}}
|
||||
</video>
|
||||
<div v-if="downloadProgress" class="download-overlay">
|
||||
<div class="text-center download-text">
|
||||
{{ downloadProgress }}% downloaded
|
||||
{{ $t('message.download_progress',{percentage: downloadProgress}) }}
|
||||
</div>
|
||||
</div>
|
||||
</v-responsive>
|
||||
|
|
|
|||
|
|
@ -12,25 +12,25 @@
|
|||
<v-btn icon @click.stop="addReply" class="ma-0 pa-0">
|
||||
<v-icon>reply</v-icon>
|
||||
</v-btn>
|
||||
<div>Reply</div>
|
||||
<div>{{$t('menu.reply')}}</div>
|
||||
</v-col>
|
||||
<v-col v-if="isEditable">
|
||||
<v-btn icon @click.stop="edit" class="ma-0 pa-0">
|
||||
<v-icon>edit</v-icon>
|
||||
</v-btn>
|
||||
<div>Edit</div>
|
||||
<div>{{$t('menu.edit')}}</div>
|
||||
</v-col>
|
||||
<v-col v-if="isRedactable">
|
||||
<v-btn icon @click.stop="redact" class="ma-0 pa-0">
|
||||
<v-icon>delete</v-icon>
|
||||
</v-btn>
|
||||
<div>Delete</div>
|
||||
<div>{{$t('menu.delete')}}</div>
|
||||
</v-col>
|
||||
<v-col v-if="isDownloadable">
|
||||
<v-btn icon @click.stop="download" class="ma-0 pa-0">
|
||||
<v-icon>get_app</v-icon>
|
||||
</v-btn>
|
||||
<div>Download</div>
|
||||
<div>{{$t('menu.download')}}</div>
|
||||
</v-col>
|
||||
</v-row>
|
||||
</v-container>
|
||||
|
|
|
|||
|
|
@ -18,7 +18,7 @@
|
|||
<img v-if="userAvatar" :src="userAvatar" />
|
||||
<span v-else class="white--text headline">{{ userAvatarLetter }}</span>
|
||||
</v-avatar>
|
||||
<!-- <div class="sender">{{ "You" }}</div> -->
|
||||
<!-- <div class="sender">{{ $t('message.you') }}</div> -->
|
||||
<div class="senderAndTime">
|
||||
<div class="time">
|
||||
{{ formatTime(event.event.origin_server_ts) }}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<message-outgoing v-bind="{ ...$props, ...$attrs }" v-on="$listeners">
|
||||
<div class="audio-bubble">
|
||||
<audio-player :src="src">Audio file</audio-player>
|
||||
<audio-player :src="src">{{ $t('fallbacks.audio_file')}}</audio-player>
|
||||
</div>
|
||||
</message-outgoing>
|
||||
</template>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="bubble">
|
||||
<div class="original-message" v-if="inReplyToText">
|
||||
<div class="original-message-sender">
|
||||
{{ inReplyToSender || "Someone" }} said:
|
||||
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
|
||||
</div>
|
||||
<div
|
||||
class="original-message-text"
|
||||
|
|
@ -19,7 +19,7 @@
|
|||
v-html="linkify($sanitize(messageText))"
|
||||
/>
|
||||
<span class="edit-marker" v-if="event.replacingEventId()"
|
||||
>(edited)</span
|
||||
>{{ $t('edited') }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="bubble">
|
||||
<div class="original-message" v-if="inReplyToText">
|
||||
<div class="original-message-sender">
|
||||
{{ inReplyToSender || "Someone" }} said:
|
||||
{{ $t('message.user_said', {user: inReplyToSender || "Someone"}) }}
|
||||
</div>
|
||||
<div
|
||||
class="original-message-text"
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
<div class="message">
|
||||
<span v-html="linkify($sanitize(messageText))" />
|
||||
<span class="edit-marker" v-if="event.replacingEventId()"
|
||||
>(edited)</span
|
||||
>{{ $t('edited') }}</span
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
<div class="bubble image-bubble">
|
||||
<v-responsive :aspect-ratio="16 / 9" class="ma-0 pa-0">
|
||||
<video :src="src" controls style="width: 100%; height: 100%">
|
||||
Video file
|
||||
{{$t('fallbacks.video_file')}}
|
||||
</video>
|
||||
</v-responsive>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- ROOM AVATAR CHANGED -->
|
||||
<div class="statusEvent">
|
||||
{{ stateEventDisplayName(event) }} changed the room avatar
|
||||
{{ $t('message.user_changed_room_avatar',{user: stateEventDisplayName(event)}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- ROOM AVATAR CHANGED -->
|
||||
<div class="statusEvent">
|
||||
{{ stateEventDisplayName(event) }} made room history {{ history(event) }}
|
||||
{{ $t('message.user_changed_room_history',{user: stateEventDisplayName(event), type: history(event)}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,13 +15,13 @@ export default {
|
|||
const visibility = event.getContent().history_visibility;
|
||||
switch (visibility) {
|
||||
case "world_readable":
|
||||
return "readable by anyone";
|
||||
return this.$t('message.room_history_world_readable');
|
||||
case "shared":
|
||||
return "readable to all members in the room";
|
||||
return this.$t('message.room_history_shared');
|
||||
case "invited":
|
||||
return "readable to members from when they were invited";
|
||||
return this.$t('message.room_history_invited');
|
||||
case "joined":
|
||||
return "readable to members from when they joined";
|
||||
return this.$t('message.room_history_joined');
|
||||
}
|
||||
return visibility;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<!-- ROOM JOIN RULES CHANGED -->
|
||||
<div class="statusEvent">
|
||||
{{ stateEventDisplayName(event) }} made the room {{ joinRule(event) }}
|
||||
{{ $t('message.user_changed_join_rules', { user: stateEventDisplayName(event), type: joinRule(event)}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -15,9 +15,9 @@ export default {
|
|||
const joinRule = event.getContent().join_rule;
|
||||
switch (joinRule) {
|
||||
case "invite":
|
||||
return "invite only";
|
||||
return this.$t('message.room_joinrule_invite');
|
||||
case "public":
|
||||
return "public";
|
||||
return this.$t('message.room_joinrule_public');
|
||||
}
|
||||
return joinRule;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<!-- ROOM NAME CHANGED -->
|
||||
<div class="statusEvent">
|
||||
{{ stateEventDisplayName(event) }} changed room name to
|
||||
{{ event.getContent().name }}
|
||||
{{ $t('message.user_changed_room_name', {user: stateEventDisplayName(event), name: event.getContent().name}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,8 +1,7 @@
|
|||
<template>
|
||||
<!-- ROOM TOPIC CHANGED -->
|
||||
<div class="statusEvent">
|
||||
{{ stateEventDisplayName(event) }} changed topic to
|
||||
{{ event.getContent().topic }}
|
||||
{{ $t('message.user_changed_room_topic', {user: stateEventDisplayName(event), topic: event.getContent().topic}) }}
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -102,7 +102,7 @@ export default {
|
|||
}
|
||||
|
||||
// We don't have the original text (at the moment at least)
|
||||
return "<original text>";
|
||||
return this.$t('fallbacks.original_text');
|
||||
}
|
||||
return null;
|
||||
},
|
||||
|
|
@ -169,7 +169,7 @@ export default {
|
|||
*/
|
||||
stateEventDisplayName(event) {
|
||||
if (event.getSender() == this.$matrix.currentUserId) {
|
||||
return "You";
|
||||
return this.$t('message.you');
|
||||
}
|
||||
if (this.room) {
|
||||
const member = this.room.getMember(event.getSender());
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue