Browse Source

Video player: added volume selector animation

master
Eduard Kuzmenko 3 years ago
parent
commit
0f09642060
  1. 34
      src/lib/mediaPlayer.ts
  2. 8
      src/scss/partials/_chatPinned.scss
  3. 40
      src/scss/partials/_ckin.scss
  4. 11
      src/scss/partials/_document.scss
  5. 31
      src/scss/partials/_fonts.scss
  6. 9
      src/scss/partials/_ico.scss

34
src/lib/mediaPlayer.ts

@ -191,8 +191,9 @@ export class MediaProgressLine extends RangeSelector { @@ -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 { @@ -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 { @@ -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);

8
src/scss/partials/_chatPinned.scss

@ -711,16 +711,10 @@ @@ -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;

40
src/scss/partials/_ckin.scss

@ -216,29 +216,55 @@ @@ -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 & {

11
src/scss/partials/_document.scss

@ -118,23 +118,20 @@ @@ -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;

31
src/scss/partials/_fonts.scss

@ -9,9 +9,9 @@ @@ -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 @@ @@ -332,11 +332,6 @@
content: $tgico-endcall_filled;
}
}
.tgico-endcall {
&:before {
content: $tgico-endcall;
}
}
.tgico-enter {
&:before {
content: $tgico-enter;
@ -897,6 +892,26 @@ @@ -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;

9
src/scss/partials/_ico.scss

@ -78,7 +78,6 @@ $tgico-eats: "\e937"; @@ -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"; @@ -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…
Cancel
Save