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";