From 0f09642060667e4afa96e291a9c6ce177bf8c121 Mon Sep 17 00:00:00 2001 From: Eduard Kuzmenko Date: Fri, 25 Feb 2022 17:39:24 +0200 Subject: [PATCH] Video player: added volume selector animation --- src/lib/mediaPlayer.ts | 34 ++++++++++++------------- src/scss/partials/_chatPinned.scss | 8 +----- src/scss/partials/_ckin.scss | 40 ++++++++++++++++++++++++------ src/scss/partials/_document.scss | 11 +++----- src/scss/partials/_fonts.scss | 31 +++++++++++++++++------ src/scss/partials/_ico.scss | 9 ++++--- 6 files changed, 83 insertions(+), 50 deletions(-) diff --git a/src/lib/mediaPlayer.ts b/src/lib/mediaPlayer.ts index 1c5da7d0..5b89916d 100644 --- a/src/lib/mediaPlayer.ts +++ b/src/lib/mediaPlayer.ts @@ -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 = ` - - `; - 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 = ``; - } 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); diff --git a/src/scss/partials/_chatPinned.scss b/src/scss/partials/_chatPinned.scss index 893010fb..488d7f95 100644 --- a/src/scss/partials/_chatPinned.scss +++ b/src/scss/partials/_chatPinned.scss @@ -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; diff --git a/src/scss/partials/_ckin.scss b/src/scss/partials/_ckin.scss index d157957f..88617815 100644 --- a/src/scss/partials/_ckin.scss +++ b/src/scss/partials/_ckin.scss @@ -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 & { diff --git a/src/scss/partials/_document.scss b/src/scss/partials/_document.scss index 7512b6df..d7cb10a6 100644 --- a/src/scss/partials/_document.scss +++ b/src/scss/partials/_document.scss @@ -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; diff --git a/src/scss/partials/_fonts.scss b/src/scss/partials/_fonts.scss index a5122103..ecb39d6b 100644 --- a/src/scss/partials/_fonts.scss +++ b/src/scss/partials/_fonts.scss @@ -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; diff --git a/src/scss/partials/_ico.scss b/src/scss/partials/_ico.scss index 5cdb812f..2c8a7a8e 100644 --- a/src/scss/partials/_ico.scss +++ b/src/scss/partials/_ico.scss @@ -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";