Skip to content

Commit

Permalink
Merge pull request #2448 from IDEMSInternational/feat/audio-player-co…
Browse files Browse the repository at this point in the history 
…mpact-variant

feat: audio component 'compact' variant; refactor audio component logic
  • Loading branch information
@jfmcquade
jfmcquade authored Oct 8, 2024
2 parents 25c22e5 + bb8dfad commit 3f6ff1c
Show file tree
Hide file tree
Showing 5 changed files with 350 additions and 209 deletions.
130 changes: 73 additions & 57 deletions src/app/shared/components/template/components/audio/audio.component.html
View file
Original file line number Diff line number Diff line change
@@ -1,65 +1,81 @@
<div class="container-player margin-t-large">
<div class="top-row">
<div class="title_and_help">
<h3 *ngIf="params.title">{{ params.title }}</h3>
<ion-icon
*ngIf="params.helpText"
[pTooltip]="params.helpText"
tooltipPosition="left"
tooltipEvent="click"
name="help-circle-outline"
[src]="params.helpIconAsset"
class="audio-help"
></ion-icon>
<div class="container-player margin-t-large" [attr.data-variant]="params.variant">
@if (params.title) {
<div class="top-row">
<h3>{{ params.title }}</h3>
@if (params.variant.includes("large") && params.showInfoButton) {
<div class="info-icon-container">
@if (params.infoIconAsset) {
<ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
} @else {
<ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
}
</div>
}
</div>
</div>
<div class="progress-block" [class.disabled]="params.rangeBarDisabled || !player">
<ion-range
#range
class="audio-range"
max="100"
aria-readonly="true"
[value]="progress()"
(ionChange)="checkChange()"
(touchstart)="checkFocus()"
(touchend)="seek()"
(mouseup)="seek()"
></ion-range>
</div>
<div class="time">
<div class="time-value">
{{ +currentTimeSong * 1000 | date: "mm:ss" }}
</div>
<div class="time-value">
{{ !player ? "00:00" : (player.duration() * 1000 | date: "mm:ss") }}
}
<div class="second-row">
@if (params.variant.includes("compact") && params.showInfoButton) {
<div class="info-icon-container">
@if (params.infoIconAsset) {
<ion-icon [src]="params.infoIconAsset | plhAsset" (click)="clickInfo()"></ion-icon>
} @else {
<ion-icon name="document-text-outline" (click)="clickInfo()"></ion-icon>
}
</div>
}
<div class="progress-block" [class.disabled]="params.rangeBarDisabled || !player">
<ion-range
#range
class="audio-range"
max="100"
aria-readonly="true"
[value]="progress()"
(ionInput)="onProgressDrag($event)"
(ionChange)="seekToTime()"
(touchstart)="player.pause()"
(touchend)="this.isPlaying ? player.play() : player.pause()"
></ion-range>
<div class="time">
@if (params.variant.includes("large")) {
<div class="time-value">
{{ progressSeconds() * 1000 | date: "mm:ss" }}
</div>
<div class="time-value">
{{ !player ? "00:00" : (player?.duration() * 1000 | date: "mm:ss") }}
</div>
} @else {
<div class="time-value">
{{
hasStarted
? (progressSeconds() * 1000 | date: "mm:ss")
: (player?.duration() * 1000 | date: "mm:ss")
}}
</div>
}
</div>
</div>
</div>
<div class="controls" *ngIf="!errorTxt">
<div class="rewind">
<ion-icon
[name]="params.forwardIconAsset"
[src]="params.forwardIconAsset"
(click)="rewindPrev()"
></ion-icon>
</div>
<div class="play">
<ion-button class="btn-play" (click)="togglePlayer()">
<div class="controls">
<div class="rewind">
<ion-icon
[name]="!isPlayed ? params.playIconAsset : params.pauseIconAsset"
[src]="!isPlayed ? params.playIconAsset : params.pauseIconAsset"
[class.play-icon]="!isPlayed"
[name]="params.forwardIconAsset"
[src]="params.forwardIconAsset"
(click)="skipBackward()"
></ion-icon>
</div>
<ion-button class="btn-play" (click)="togglePlaying()" [disabled]="!player">
<ion-icon
[name]="!isPlaying ? params.playIconAsset : params.pauseIconAsset"
[src]="!isPlaying ? params.playIconAsset : params.pauseIconAsset"
[class.play-icon]="!isPlaying"
></ion-icon>
</ion-button>
<div class="forward">
<ion-icon
[name]="params.forwardIconAsset"
[src]="params.forwardIconAsset"
(click)="skipForward()"
></ion-icon>
</div>
</div>
<div class="forward">
<ion-icon
[name]="params.forwardIconAsset"
[src]="params.forwardIconAsset"
(click)="rewindNext()"
></ion-icon>
</div>
</div>
<div class="error-text" *ngIf="errorTxt">
{{ errorTxt }}
</div>
</div>
203 changes: 145 additions & 58 deletions src/app/shared/components/template/components/audio/audio.component.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,86 +2,177 @@

$control-background: var(--audio-control-background, var(--ion-color-primary-500));

.container-player {
background: var(--ion-color-primary-contrast);
.container-player[data-variant~="compact"] {
background: white;
border: var(--ion-border-standard);
box-sizing: border-box;
box-shadow: var(--ion-default-box-shadow);
border-radius: var(--ion-border-radius-standard);
padding: var(--regular-padding);
padding: var(--small-padding);
display: flex;
position: relative;
flex-direction: column;
.top-row {
@include mixins.flex-space-between;
.title_and_help {
width: 100%;
display: flex;
min-height: var(--audio-title-and-help-height);
h3 {
margin: 0;
margin-right: var(--small-margin);
color: var(--ion-color-primary);
max-width: 85%;
font-weight: var(--font-weight-bold);
font-size: var(--audio-title-size);
}
}

.second-row {
display: flex;
flex-direction: row-reverse;

.controls {
@include mixins.flex-space-between;
align-self: center;
.rewind,
.forward {
display: none;
}
ion-button.btn-play {
@include mixins.medium-square;
margin-right: var(--small-margin);
--background: #{$control-background};
--border-radius: var(--ion-border-radius-rounded);
--box-shadow: var(--ion-default-box-shadow);
ion-icon {
position: absolute;
font-size: var(--icon-size-tiny);
// Fine-tune spacing of 'play' icon so that triangle appears to be centred visually
&.play-icon {
padding-left: 4px;
}
}
}
}

.progress-block {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--audio-title-and-help-height);
h3 {
margin: 0;
margin-right: var(--small-margin);
color: var(--ion-color-primary);
max-width: 85%;
font-weight: var(--font-weight-bold);
font-size: var(--audio-title-size);
margin-left: var(--small-margin);
ion-range {
width: 100%;
--bar-background: var(--ion-color-gray-200);
--bar-height: 4px;
--knob-size: 18px;
--knob-background: var(--ion-color-primary);
--bar-border-radius: 10px;
}
.audio-help {
.time {
@include mixins.flex-space-between;
margin-left: var(--small-margin);
.time-value {
font-size: var(--font-size-text-small);
line-height: var(--line-height-text-small);
color: var(--ion-color-primary);
}
}
}
.info-icon-container {
@include mixins.flex-centered;
margin-left: var(--small-margin);
ion-icon {
color: var(--ion-color-primary);
height: var(--help-icon-standard-size);
width: var(--help-icon-standard-size);
font-size: var(--icon-size-tiny);
}
}
}
.progress-block {
.audio-range {
--bar-background-active: #{$control-background};
--bar-background: transparent;
--bar-height: 4px;
--bar-border-radius: var(--ion-border-radius-secondary);
--knob-size: 0px;
--pin-background: var(--ion-color-primary);
--knob-background: var(--ion-color-primary);
padding-inline: 0;
}

ion-range::part(bar) {
border: var(--ion-border-thin-standard);
height: var(--audio-bar-height);
}
}

ion-range::part(bar-active) {
top: 4px;
margin-left: 3px;
}
}
.time {
.container-player[data-variant~="large"] {
background: var(--ion-color-primary-contrast);
border: var(--ion-border-standard);
box-sizing: border-box;
box-shadow: var(--ion-default-box-shadow);
border-radius: var(--ion-border-radius-standard);
padding: var(--regular-padding);
display: flex;
position: relative;
flex-direction: column;
.top-row {
@include mixins.flex-space-between;
&-value {
font-size: var(--font-size-text-large);
line-height: var(--line-height-text-small);
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--audio-title-and-help-height);
h3 {
margin: 0;
margin-right: var(--small-margin);
color: var(--ion-color-primary);
max-width: 85%;
font-weight: var(--font-weight-bold);
font-size: var(--audio-title-size);
}
}
.controls {
@include mixins.flex-space-between;
min-width: var(--audio-controls-width);
align-self: center;
.rewind,
.forward {
.info-icon-container {
@include mixins.flex-centered;
ion-icon {
font-size: var(--icon-size-largest);
color: var(--ion-color-primary);
font-size: var(--icon-size-small);
}
}
.rewind {
ion-icon {
transform: rotate(180deg);
}

.second-row {
display: flex;
flex-direction: column;

.progress-block {
width: 100%;
.audio-range {
--bar-background-active: #{$control-background};
--bar-background: transparent;
--bar-height: 4px;
--bar-border-radius: var(--ion-border-radius-secondary);
--knob-size: 0px;
--pin-background: var(--ion-color-primary);
--knob-background: var(--ion-color-primary);
padding-inline: 0;
}

ion-range::part(bar) {
border: var(--ion-border-thin-standard);
height: var(--audio-bar-height);
}

ion-range::part(bar-active) {
top: 4px;
margin-left: 3px;
}
.time {
@include mixins.flex-space-between;
&-value {
font-size: var(--font-size-text-large);
line-height: var(--line-height-text-small);
color: var(--ion-color-primary);
}
}
}
.play {
.controls {
@include mixins.flex-space-between;
width: var(--audio-controls-width);
align-self: center;
.rewind,
.forward {
ion-icon {
font-size: var(--icon-size-largest);
color: var(--ion-color-primary);
}
}
.rewind {
ion-icon {
transform: rotate(180deg);
}
}
.btn-play {
@include mixins.large-square;
--background: #{$control-background};
Expand All @@ -99,10 +190,6 @@ $control-background: var(--audio-control-background, var(--ion-color-primary-500
}
}
}
.error-text {
margin: var(--small-margin) 0;
text-align: center;
}
}
.disabled {
pointer-events: none;
Expand Down
Loading

0 comments on commit 3f6ff1c

Please sign in to comment.