Video player: added volume selector animation
This commit is contained in:
Eduard Kuzmenko
parent
46f759f0f4
commit
0f09642060
@ -191,8 +191,9 @@ export class MediaProgressLine extends RangeSelector {
|
||||
}
|
||||
|
||||
export class VolumeSelector extends RangeSelector {
|
||||
private static ICONS = ['volume_off', 'volume_mute', 'volume_down', 'volume_up'];
|
||||
public btn: HTMLElement;
|
||||
protected volumeSvg: HTMLElement;
|
||||
protected icon: HTMLSpanElement;
|
||||
|
||||
constructor(protected listenerSetter: ListenerSetter, protected vertical = false) {
|
||||
super({
|
||||
@ -218,18 +219,15 @@ export class VolumeSelector extends RangeSelector {
|
||||
} */
|
||||
});
|
||||
|
||||
this.btn = document.createElement('div');
|
||||
this.btn.classList.add('player-volume');
|
||||
const className = 'player-volume';
|
||||
const btn = this.btn = document.createElement('div');
|
||||
btn.classList.add('btn-icon', className);
|
||||
const icon = this.icon = document.createElement('span');
|
||||
icon.classList.add(className + '__icon');
|
||||
|
||||
this.btn.innerHTML = `
|
||||
<svg class="player-volume__icon" focusable="false" viewBox="0 0 24 24" aria-hidden="true"></svg>
|
||||
`;
|
||||
this.btn.classList.add('btn-icon');
|
||||
this.volumeSvg = this.btn.firstElementChild as HTMLElement;
|
||||
btn.append(icon, this.container);
|
||||
|
||||
this.btn.append(this.container);
|
||||
|
||||
attachClickEvent(this.volumeSvg, this.onMuteClick, {listenerSetter: this.listenerSetter});
|
||||
attachClickEvent(icon, this.onMuteClick, {listenerSetter: this.listenerSetter});
|
||||
this.listenerSetter.add(rootScope)('media_playback_params', this.setVolume);
|
||||
|
||||
this.setVolume();
|
||||
@ -244,19 +242,19 @@ export class VolumeSelector extends RangeSelector {
|
||||
// const volume = video.volume;
|
||||
const {volume, muted} = appMediaPlaybackController;
|
||||
let d: string;
|
||||
let iconIndex: number;
|
||||
if(!volume || muted) {
|
||||
d = `M16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zm2.5 0c0 .94-.2 1.82-.54 2.64l1.51 1.51C20.63 14.91 21 13.5 21 12c0-4.28-2.99-7.86-7-8.77v2.06c2.89.86 5 3.54 5 6.71zM4.27 3L3 4.27 7.73 9H3v6h4l5 5v-6.73l4.25 4.25c-.67.52-1.42.93-2.25 1.18v2.06c1.38-.31 2.63-.95 3.69-1.81L19.73 21 21 19.73l-9-9L4.27 3zM12 4L9.91 6.09 12 8.18V4z`;
|
||||
iconIndex = 0;
|
||||
} else if(volume > .5) {
|
||||
d = `M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z`;
|
||||
iconIndex = 3;
|
||||
} else if(volume > 0 && volume < .25) {
|
||||
d = `M7 9v6h4l5 5V4l-5 5H7z`;
|
||||
iconIndex = 1;
|
||||
} else {
|
||||
d = `M18.5 12c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM5 9v6h4l5 5V4L9 9H5z`;
|
||||
iconIndex = 2;
|
||||
}
|
||||
|
||||
try {
|
||||
this.volumeSvg.innerHTML = `<path d="${d}"></path>`;
|
||||
} catch(err) {}
|
||||
VolumeSelector.ICONS.forEach(icon => this.icon.classList.remove('tgico-' + icon));
|
||||
this.icon.classList.add('tgico-' + VolumeSelector.ICONS[iconIndex]);
|
||||
|
||||
if(!this.mousedown) {
|
||||
this.setProgress(muted ? 0 : volume);
|
||||
|
||||
@ -711,16 +711,10 @@
|
||||
}
|
||||
|
||||
.player-volume__icon {
|
||||
fill: var(--secondary-text-color);
|
||||
width: inherit;
|
||||
height: inherit;
|
||||
display: flex;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&.active .player-volume__icon {
|
||||
fill: var(--primary-color);
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
&-container {
|
||||
position: absolute;
|
||||
|
||||
@ -216,29 +216,55 @@
|
||||
}
|
||||
|
||||
.player-volume {
|
||||
margin: 0 .125rem 0 .625rem;
|
||||
--icon-size: 2.25rem;
|
||||
--icon-margin-right: .5rem;
|
||||
--selector-size: 50px;
|
||||
--selector-thumb-size: .75rem;
|
||||
--hide-width: var(--icon-size);
|
||||
--show-width: calc(var(--icon-size) + var(--icon-margin-right) + var(--selector-size) + var(--selector-thumb-size) * .75);
|
||||
// margin: 0 .125rem;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
width: var(--hide-width);
|
||||
overflow: hidden;
|
||||
|
||||
@include animation-level(2) {
|
||||
transition: width var(--layer-transition);
|
||||
}
|
||||
|
||||
html.is-touch & {
|
||||
// margin-left: .125rem;
|
||||
display: none;
|
||||
}
|
||||
|
||||
html:not(.is-touch) & {
|
||||
& + .time {
|
||||
margin-left: .5rem;
|
||||
}
|
||||
}
|
||||
|
||||
@include hover() {
|
||||
width: var(--show-width);
|
||||
}
|
||||
|
||||
&__icon {
|
||||
fill: #fff;
|
||||
width: 2.25rem;
|
||||
height: 2.25rem;
|
||||
margin-right: .5rem;
|
||||
color: #fff;
|
||||
width: var(--icon-size);
|
||||
height: var(--icon-size);
|
||||
margin-right: var(--icon-margin-right);
|
||||
cursor: pointer;
|
||||
padding: .375rem;
|
||||
font-size: 1.5rem;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.progress-line {
|
||||
--color: #fff;
|
||||
--thumb-size: var(--selector-thumb-size);
|
||||
--height: 4px;
|
||||
margin: 0;
|
||||
width: 50px;
|
||||
--thumb-size: 15px;
|
||||
width: var(--selector-size);
|
||||
min-width: var(--selector-size);
|
||||
|
||||
// https://stackoverflow.com/a/4816050
|
||||
html.is-ios & {
|
||||
|
||||
@ -118,23 +118,20 @@
|
||||
&-name {
|
||||
white-space: nowrap;
|
||||
font-weight: 500;
|
||||
font-size: 1rem;
|
||||
font-size: var(--font-size-16);
|
||||
line-height: var(--line-height-16);
|
||||
}
|
||||
|
||||
&-size {
|
||||
white-space: nowrap;
|
||||
color: var(--secondary-text-color);
|
||||
font-size: .875rem;
|
||||
font-size: var(--font-size-14);
|
||||
line-height: var(--line-height-14);
|
||||
//padding-right: 32px;
|
||||
text-overflow: ellipsis;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&-name,
|
||||
&-size {
|
||||
line-height: var(--line-height);
|
||||
}
|
||||
|
||||
.preloader-container {
|
||||
width: 2.5rem;
|
||||
height: 2.5rem;
|
||||
|
||||
@ -9,9 +9,9 @@
|
||||
@font-face {
|
||||
font-family: "#{$tgico-font-family}";
|
||||
src:
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?xxkozq') format('truetype'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?xxkozq') format('woff'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?xxkozq#tgico') format('svg');
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.ttf?oxpaus') format('truetype'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.woff?oxpaus') format('woff'),
|
||||
url('#{$tgico-font-path}/#{$tgico-font-family}.svg?oxpaus#tgico') format('svg');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
font-display: block;
|
||||
@ -332,11 +332,6 @@
|
||||
content: $tgico-endcall_filled;
|
||||
}
|
||||
}
|
||||
.tgico-endcall {
|
||||
&:before {
|
||||
content: $tgico-endcall;
|
||||
}
|
||||
}
|
||||
.tgico-enter {
|
||||
&:before {
|
||||
content: $tgico-enter;
|
||||
@ -897,6 +892,26 @@
|
||||
content: $tgico-videochat;
|
||||
}
|
||||
}
|
||||
.tgico-volume_down {
|
||||
&:before {
|
||||
content: $tgico-volume_down;
|
||||
}
|
||||
}
|
||||
.tgico-volume_mute {
|
||||
&:before {
|
||||
content: $tgico-volume_mute;
|
||||
}
|
||||
}
|
||||
.tgico-volume_off {
|
||||
&:before {
|
||||
content: $tgico-volume_off;
|
||||
}
|
||||
}
|
||||
.tgico-volume_up {
|
||||
&:before {
|
||||
content: $tgico-volume_up;
|
||||
}
|
||||
}
|
||||
.tgico-zoomin {
|
||||
&:before {
|
||||
content: $tgico-zoomin;
|
||||
|
||||
@ -78,7 +78,6 @@ $tgico-eats: "\e937";
|
||||
$tgico-edit: "\e938";
|
||||
$tgico-email: "\e939";
|
||||
$tgico-endcall_filled: "\e93a";
|
||||
$tgico-endcall: "\e93b";
|
||||
$tgico-enter: "\e93c";
|
||||
$tgico-eye1: "\e93d";
|
||||
$tgico-eye2: "\e93e";
|
||||
@ -191,5 +190,9 @@ $tgico-username: "\e9a8";
|
||||
$tgico-videocamera_filled: "\e9a9";
|
||||
$tgico-videocamera: "\e9aa";
|
||||
$tgico-videochat: "\e9ab";
|
||||
$tgico-zoomin: "\e9ac";
|
||||
$tgico-zoomout: "\e9ad";
|
||||
$tgico-volume_down: "\e9ac";
|
||||
$tgico-volume_mute: "\e9ad";
|
||||
$tgico-volume_off: "\e9ae";
|
||||
$tgico-volume_up: "\e9af";
|
||||
$tgico-zoomin: "\e9b0";
|
||||
$tgico-zoomout: "\e9b1";
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user