Skip to content

Update LocalMediaControls buttons labels #8746

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Antreesy merged 3 commits into from
Feb 16, 2023
Merged

Update LocalMediaControls buttons labels #8746

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
6550240
fix code style for computed labels
Antreesy Feb 14, 2023
efe312e
move label for lower hand button to computed
Antreesy Feb 14, 2023
a24082d
update labels, open device settings on click
Antreesy Feb 15, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
81 changes: 42 additions & 39 deletions src/components/CallView/shared/LocalMediaControls.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -151,12 +151,12 @@
</NcActionButton>
</NcActions>
<NcButton v-shortkey.once="disableKeyboardShortcuts ? null : ['r']"
v-tooltip="disableKeyboardShortcuts ? t('spreed', 'Lower hand') : t('spreed', 'Lower hand (R)')"
v-tooltip="lowerHandAriaLabel"
:aria-label="lowerHandAriaLabel"
type="tertiary-no-background"
class="lower-hand"
:class="model.attributes.raisedHand.state ? '' : 'hidden-visually'"
:tabindex="model.attributes.raisedHand.state ? 0 : -1"
:aria-label="disableKeyboardShortcuts ? t('spreed', 'Lower hand') : t('spreed', 'Lower hand (R)')"
@shortkey="toggleHandRaised"
@click.stop="toggleHandRaised">
<template #icon>
Expand Down Expand Up @@ -280,10 +280,9 @@ export default {
},

toggleVirtualBackgroundButtonLabel() {
if (!this.isVirtualBackgroundEnabled) {
return t('spreed', 'Blur background')
}
return t('spreed', 'Disable background blur')
return this.isVirtualBackgroundEnabled
? t('spreed', 'Disable background blur')
: t('spreed', 'Blur background')
},

conversation() {
Expand Down Expand Up @@ -320,7 +319,7 @@ export default {

if (!this.model.attributes.audioAvailable) {
return {
content: t('spreed', 'No audio'),
content: t('spreed', 'No audio. Click to select device'),
show: false,
}
}
Expand All @@ -334,17 +333,13 @@ export default {

let content = ''
if (this.model.attributes.audioEnabled) {
if (this.disableKeyboardShortcuts) {
content = t('spreed', 'Mute audio')
} else {
content = t('spreed', 'Mute audio (M)')
}
content = this.disableKeyboardShortcuts
? t('spreed', 'Mute audio')
: t('spreed', 'Mute audio (M)')
} else {
if (this.disableKeyboardShortcuts) {
content = t('spreed', 'Unmute audio')
} else {
content = t('spreed', 'Unmute audio (M)')
}
content = this.disableKeyboardShortcuts
? t('spreed', 'Unmute audio')
: t('spreed', 'Unmute audio (M)')
}

return {
Expand All @@ -355,9 +350,18 @@ export default {

audioButtonAriaLabel() {
if (!this.model.attributes.audioAvailable) {
return t('spreed', 'No audio')
return t('spreed', 'No audio. Click to select device')
}
return this.model.attributes.audioEnabled ? t('spreed', 'Mute audio') : t('spreed', 'Unmute audio')

return this.model.attributes.audioEnabled
? t('spreed', 'Mute audio')
: t('spreed', 'Unmute audio')
},

lowerHandAriaLabel() {
return this.disableKeyboardShortcuts
? t('spreed', 'Lower hand')
: t('spreed', 'Lower hand (R)')
},

videoButtonClass() {
Expand All @@ -383,35 +387,29 @@ export default {
}

if (!this.model.attributes.videoAvailable) {
return t('spreed', 'No camera')
return t('spreed', 'No video. Click to select device')
}

if (this.model.attributes.videoEnabled) {
if (this.disableKeyboardShortcuts) {
return t('spreed', 'Disable video')
}

return t('spreed', 'Disable video (V)')
return this.disableKeyboardShortcuts
? t('spreed', 'Disable video')
: t('spreed', 'Disable video (V)')
}

if (!this.model.getWebRtc() || !this.model.getWebRtc().connection || this.model.getWebRtc().connection.getSendVideoIfAvailable()) {
if (this.disableKeyboardShortcuts) {
return t('spreed', 'Enable video')
}

return t('spreed', 'Enable video (V)')
}

if (this.disableKeyboardShortcuts) {
return t('spreed', 'Enable video - Your connection will be briefly interrupted when enabling the video for the first time')
return this.disableKeyboardShortcuts
? t('spreed', 'Enable video')
: t('spreed', 'Enable video (V)')
}

return t('spreed', 'Enable video (V) - Your connection will be briefly interrupted when enabling the video for the first time')
return this.disableKeyboardShortcuts
? t('spreed', 'Enable video - Your connection will be briefly interrupted when enabling the video for the first time')
: t('spreed', 'Enable video (V) - Your connection will be briefly interrupted when enabling the video for the first time')
},

videoButtonAriaLabel() {
if (!this.model.attributes.videoAvailable) {
return t('spreed', 'No camera')
return t('spreed', 'No video. Click to select device')
}

if (this.model.attributes.videoEnabled) {
Expand Down Expand Up @@ -445,15 +443,19 @@ export default {
return t('spreed', 'No screensharing')
}

return this.model.attributes.localScreen ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
return this.model.attributes.localScreen
? t('spreed', 'Screensharing options')
: t('spreed', 'Enable screensharing')
},

screenSharingButtonAriaLabel() {
if (this.screenSharingMenuOpen) {
return ''
}

return this.model.attributes.localScreen ? t('spreed', 'Screensharing options') : t('spreed', 'Enable screensharing')
return this.model.attributes.localScreen
? t('spreed', 'Screensharing options')
: t('spreed', 'Enable screensharing')
},

container() {
Expand Down Expand Up @@ -626,6 +628,7 @@ export default {

toggleAudio() {
if (!this.model.attributes.audioAvailable) {
emit('show-settings', {})
return
}

Expand All @@ -650,6 +653,7 @@ export default {
}

if (!this.model.attributes.videoAvailable) {
emit('show-settings', {})
return
}

Expand Down Expand Up @@ -812,7 +816,6 @@ export default {
.buttons-bar button.no-screensharing-available {
&, & * {
opacity: .7;
cursor: not-allowed;
}
}

Expand Down
4 changes: 4 additions & 0 deletions src/components/VolumeIndicator/VolumeIndicator.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -160,6 +160,10 @@ export default {
overflow: hidden;

transition: height 0.2s linear;

&, & * {
cursor: inherit;
}
}

.volume-indicator-primary {
Expand Down