herum-shared 0.1.31 → 0.1.32

package/fesm2022/herum-shared.mjs

@@ -1,5 +1,5 @@
 import * as i0 from '@angular/core';
-import { HostListener, Input, Directive, EventEmitter, ViewChild, Output, Component, Pipe, Inject, HostBinding, forwardRef, ViewChildren, Optional, Self, InjectionToken, Injectable, ViewEncapsulation, NgModule } from '@angular/core';
+import { HostListener, Input, Directive, EventEmitter, ViewChild, Output, Component, Pipe, Inject, HostBinding, forwardRef, ViewChildren, Optional, Self, Injectable, ViewEncapsulation, NgModule } from '@angular/core';
 import * as i1 from '@angular/common';
 import { formatDate, DOCUMENT, CommonModule, DatePipe } from '@angular/common';
 import { Subject, BehaviorSubject, forkJoin, EMPTY } from 'rxjs';
@@ -42,7 +42,7 @@ import { DateRange, MatDatepickerModule } from '@angular/material/datepicker';
 import * as i1$7 from '@angular/material/core';
 import { MatNativeDateModule, MAT_DATE_LOCALE } from '@angular/material/core';
 import { v4 } from 'uuid';
-import { SYSTEM_TRACK_TEXT_CHANGES_SERVICE as SYSTEM_TRACK_TEXT_CHANGES_SERVICE$1, SYSTEM_AUDIO_VISUAL_CONFIGURATION as SYSTEM_AUDIO_VISUAL_CONFIGURATION$1 } from 'herum-shared/tokens';
+import { SYSTEM_AUDIO_VISUAL_CONFIGURATION, SYSTEM_TRACK_TEXT_CHANGES_SERVICE } from 'herum-shared/tokens';
 import { StorageService } from 'herum-shared/static-services';
 import { selfIsTeacherExample, closedListExample, permissionsTemplatesExample } from 'herum-shared/objectsExample';
 import * as i2$4 from '@angular/router';
@@ -3378,11 +3378,6 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 args: ['dropContainer']
             }] } });
 
-const SYSTEM_IDENTIFIER = new InjectionToken('SystemIdentifier');
-const SYSTEM_USER_SERVICE = new InjectionToken('SystemUserService');
-const SYSTEM_TRACK_TEXT_CHANGES_SERVICE = new InjectionToken('SystemTrackTextChangesService');
-const SYSTEM_AUDIO_VISUAL_CONFIGURATION = new InjectionToken('SystemAudioVisualConfiguration');
-
 class AudioVisualizationService {
     audioVisualConfiguration;
     constructor(audioVisualConfiguration) {
@@ -4699,7 +4694,7 @@ class TrackTextChangesService {
     getStyle() {
         return this.systemContextTrackTextChangesService.getStyle();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesService, deps: [{ token: SYSTEM_TRACK_TEXT_CHANGES_SERVICE$1 }], target: i0.ɵɵFactoryTarget.Injectable });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesService, deps: [{ token: SYSTEM_TRACK_TEXT_CHANGES_SERVICE }], target: i0.ɵɵFactoryTarget.Injectable });
     static ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesService, providedIn: 'root' });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: TrackTextChangesService, decorators: [{
@@ -4709,7 +4704,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
                 }]
         }], ctorParameters: () => [{ type: i1$5.ISystemTrackTextChangesService, decorators: [{
                     type: Inject,
-                    args: [SYSTEM_TRACK_TEXT_CHANGES_SERVICE$1]
+                    args: [SYSTEM_TRACK_TEXT_CHANGES_SERVICE]
                 }] }] });
 
 class HerumSpinnerComponent {
@@ -5132,7 +5127,7 @@ class AudioPlayerComponent {
         this.pauseAudio();
         this.removeAudioElementEventListeners();
     }
-    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioPlayerComponent, deps: [{ token: AudioVisualizationService }, { token: GlobalKeyboardListenerService }, { token: KeyPressService }, { token: UtilsService }, { token: SYSTEM_AUDIO_VISUAL_CONFIGURATION$1 }], target: i0.ɵɵFactoryTarget.Component });
+    static ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioPlayerComponent, deps: [{ token: AudioVisualizationService }, { token: GlobalKeyboardListenerService }, { token: KeyPressService }, { token: UtilsService }, { token: SYSTEM_AUDIO_VISUAL_CONFIGURATION }], target: i0.ɵɵFactoryTarget.Component });
     static ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "20.3.17", type: AudioPlayerComponent, isStandalone: false, selector: "herum-audio-player", inputs: { showVolumeSliders: "showVolumeSliders", isPreview: "isPreview", getTimeUpdate: "getTimeUpdate", playbackSpeed: "playbackSpeed", isBlock: "isBlock", currentTime: "currentTime", isAudioPlaying: "isAudioPlaying", width: "width", id: "id", audioFile: "audioFile", mediaSettings: "mediaSettings", bucketName: "bucketName" }, outputs: { periodicCurrentTime: "periodicCurrentTime", isLoadingChange: "isLoadingChange", timingUpdateByRequest: "timingUpdateByRequest", mediaSettingsUpdate: "mediaSettingsUpdate" }, host: { listeners: { "window:resize": "onWindowResize()", "document:keyup": "handleKeyboardEvent($event)" } }, viewQueries: [{ propertyName: "audioCanvas", first: true, predicate: ["audioCanvas"], descendants: true }, { propertyName: "slider", first: true, predicate: ["slider"], descendants: true, static: true }, { propertyName: "audioContainer", first: true, predicate: ["audioContainer"], descendants: true }], usesOnChanges: true, ngImport: i0, template: "<div class=\"audio-container\" #audioContainer>\r\n    <p class=\"current-time\" *ngIf=\"!errorMessage\">{{ currentTimeLabel }}</p>\r\n\r\n    <p *ngIf=\"errorMessage\" class=\"m-0 d-flex gap-2 align-items-center\">\r\n        <img src=\"/assets/college/learningArea/error.svg\">\r\n        {{ errorMessage }}\r\n    </p>\r\n\r\n    <div class=\"audio-loader-container\" [userAction]=\"'currentTime: ' + currentTime\">\r\n        <canvas [class.transparent]=\"isLoading\" #audioCanvas (click)=\"_onCanvasClick($event)\"> </canvas>\r\n    </div>\r\n\r\n    <div class=\"audio-controls\">\r\n        <div *ngIf=\"showVolumeSliders\" class=\"volume-container\">\r\n            <div class=\"right slider-container\">\r\n                <label>R</label>\r\n                <audio-slider color=\"#3B2DBE\" [id]=\"'right'\" userAction\r\n                    (sliderChange)=\"rightVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n\r\n            <div class=\"left slider-container\">\r\n                <label>L</label>\r\n                <audio-slider color=\"#2D7ABE\" [id]=\"'left'\" userAction\r\n                    (sliderChange)=\"leftVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n        </div>\r\n\r\n        <button class=\"control-button\" [userAction]=\"'currentTime: ' + currentTime\" (click)=\"_skipForward(15)\" userAction>\r\n            <img src=\"assets/shared/audio-images/next15.svg\" alt=\"Fast Forward\" />\r\n        </button>\r\n\r\n        <button class=\"control-button play-button\" [userAction]=\"isAudioPlaying ? 'play' : 'pause'\"\r\n            (click)=\"_onTogglePlay()\">\r\n            <ng-container *ngIf=\"!isLoading\">\r\n                <img *ngIf=\"!isBlock\"\r\n                    [src]=\"isAudioPlaying ? 'assets/shared/audio-images/pause.svg' : 'assets/shared/audio-images/play.svg'\"\r\n                    alt=\"Play/Pause\" />\r\n                <img *ngIf=\"isBlock\"\r\n                    [src]=\"isAudioPlaying ? 'assets/shared/audio-images/gray-pause.svg' : 'assets/shared/audio-images/gray-play.svg'\"\r\n                    alt=\"Play/Pause\" />\r\n            </ng-container>\r\n            <herum-spinner *ngIf=\"isLoading\"></herum-spinner>\r\n        </button>\r\n\r\n        <button class=\"control-button\" (click)=\"_skipBackward(15)\" [userAction]=\"'currentTime: ' + currentTime\">\r\n            <img src=\"assets/shared/audio-images/previous15.svg\" alt=\"Rewind\" />\r\n        </button>\r\n\r\n        <div class=\"speed-control\">\r\n            <herum-video-select class=\"video-speed-select\" userAction [options]=\"speedOptions\"\r\n                [currentVideoSpeed]=\"playbackSpeed\" (selectedOptionEmitter)=\"_updatePlaybackSpeed($event)\">\r\n            </herum-video-select>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":root{--background-color: #f2f2f2;background-color:var(--background-color)}*{box-sizing:border-box}.audio-container{text-align:center;flex:1}.time-control{margin:20px}canvas{width:100%;height:116px;border-radius:8px;margin-top:4px;opacity:1}.transparent{opacity:0!important}.audio-loader-container{position:relative;display:flex;align-items:center;justify-content:center}.audio-loader-container .d-flex{position:absolute;z-index:2}.audio-controls{padding:12px;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--background-color);height:calc(100% - 160px)}.control-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:12px;cursor:pointer;transition:background .3s ease;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.control-button img{width:20px;height:20px}.control-button:hover{background:#f0f0f0}.play-button{width:50px;height:50px;border:none;border-radius:50%}.play-button img{width:25px;height:25px}.speed-control{display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:5px;padding:5px 10px;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.current-time{font-weight:400;font-size:14px;text-align:left;margin:0;padding-left:12px}.speed-control select{border:none;background:transparent;font-size:14px;outline:none;cursor:pointer}.volume-sliders{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:10px}.volume-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.slider-container{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:10px}.slider-container label{margin:0;background:#d18a8a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff}.left label{background-color:#2d7abe}.right label{background-color:#3b2dbe}audio-slider{width:90px}\n"], dependencies: [{ kind: "directive", type: i1.NgIf, selector: "[ngIf]", inputs: ["ngIf", "ngIfThen", "ngIfElse"] }, { kind: "component", type: HerumSpinnerComponent, selector: "herum-spinner", inputs: ["size", "borderColor", "borderWidth", "borderTopColor", "shape"] }, { kind: "component", type: HerumVideoSelectComponent, selector: "herum-video-select", inputs: ["currentVideoSpeed", "options"], outputs: ["selectedOptionEmitter"] }, { kind: "directive", type: UserActionDirective, selector: "[userAction]", inputs: ["userAction"] }, { kind: "component", type: AudioSliderComponent, selector: "audio-slider", inputs: ["sliderValue", "maxValue", "color", "id"], outputs: ["sliderChange"] }] });
 }
 i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImport: i0, type: AudioPlayerComponent, decorators: [{
@@ -5140,7 +5135,7 @@ i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "20.3.17", ngImpo
             args: [{ standalone: false, selector: 'herum-audio-player', template: "<div class=\"audio-container\" #audioContainer>\r\n    <p class=\"current-time\" *ngIf=\"!errorMessage\">{{ currentTimeLabel }}</p>\r\n\r\n    <p *ngIf=\"errorMessage\" class=\"m-0 d-flex gap-2 align-items-center\">\r\n        <img src=\"/assets/college/learningArea/error.svg\">\r\n        {{ errorMessage }}\r\n    </p>\r\n\r\n    <div class=\"audio-loader-container\" [userAction]=\"'currentTime: ' + currentTime\">\r\n        <canvas [class.transparent]=\"isLoading\" #audioCanvas (click)=\"_onCanvasClick($event)\"> </canvas>\r\n    </div>\r\n\r\n    <div class=\"audio-controls\">\r\n        <div *ngIf=\"showVolumeSliders\" class=\"volume-container\">\r\n            <div class=\"right slider-container\">\r\n                <label>R</label>\r\n                <audio-slider color=\"#3B2DBE\" [id]=\"'right'\" userAction\r\n                    (sliderChange)=\"rightVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n\r\n            <div class=\"left slider-container\">\r\n                <label>L</label>\r\n                <audio-slider color=\"#2D7ABE\" [id]=\"'left'\" userAction\r\n                    (sliderChange)=\"leftVolume=$event/100; _updateVolume()\">\r\n                </audio-slider>\r\n            </div>\r\n        </div>\r\n\r\n        <button class=\"control-button\" [userAction]=\"'currentTime: ' + currentTime\" (click)=\"_skipForward(15)\" userAction>\r\n            <img src=\"assets/shared/audio-images/next15.svg\" alt=\"Fast Forward\" />\r\n        </button>\r\n\r\n        <button class=\"control-button play-button\" [userAction]=\"isAudioPlaying ? 'play' : 'pause'\"\r\n            (click)=\"_onTogglePlay()\">\r\n            <ng-container *ngIf=\"!isLoading\">\r\n                <img *ngIf=\"!isBlock\"\r\n                    [src]=\"isAudioPlaying ? 'assets/shared/audio-images/pause.svg' : 'assets/shared/audio-images/play.svg'\"\r\n                    alt=\"Play/Pause\" />\r\n                <img *ngIf=\"isBlock\"\r\n                    [src]=\"isAudioPlaying ? 'assets/shared/audio-images/gray-pause.svg' : 'assets/shared/audio-images/gray-play.svg'\"\r\n                    alt=\"Play/Pause\" />\r\n            </ng-container>\r\n            <herum-spinner *ngIf=\"isLoading\"></herum-spinner>\r\n        </button>\r\n\r\n        <button class=\"control-button\" (click)=\"_skipBackward(15)\" [userAction]=\"'currentTime: ' + currentTime\">\r\n            <img src=\"assets/shared/audio-images/previous15.svg\" alt=\"Rewind\" />\r\n        </button>\r\n\r\n        <div class=\"speed-control\">\r\n            <herum-video-select class=\"video-speed-select\" userAction [options]=\"speedOptions\"\r\n                [currentVideoSpeed]=\"playbackSpeed\" (selectedOptionEmitter)=\"_updatePlaybackSpeed($event)\">\r\n            </herum-video-select>\r\n        </div>\r\n    </div>\r\n</div>", styles: [":root{--background-color: #f2f2f2;background-color:var(--background-color)}*{box-sizing:border-box}.audio-container{text-align:center;flex:1}.time-control{margin:20px}canvas{width:100%;height:116px;border-radius:8px;margin-top:4px;opacity:1}.transparent{opacity:0!important}.audio-loader-container{position:relative;display:flex;align-items:center;justify-content:center}.audio-loader-container .d-flex{position:absolute;z-index:2}.audio-controls{padding:12px;display:flex;align-items:center;justify-content:center;gap:10px;background-color:var(--background-color);height:calc(100% - 160px)}.control-button{width:40px;height:40px;display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:12px;cursor:pointer;transition:background .3s ease;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.control-button img{width:20px;height:20px}.control-button:hover{background:#f0f0f0}.play-button{width:50px;height:50px;border:none;border-radius:50%}.play-button img{width:25px;height:25px}.speed-control{display:flex;align-items:center;justify-content:center;background:#f9f9f9;border:none;border-radius:5px;padding:5px 10px;fill:#fff;filter:drop-shadow(0px 0px 6px rgba(0,0,0,.16))}.current-time{font-weight:400;font-size:14px;text-align:left;margin:0;padding-left:12px}.speed-control select{border:none;background:transparent;font-size:14px;outline:none;cursor:pointer}.volume-sliders{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:10px}.volume-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px}.slider-container{display:flex;flex-direction:row-reverse;align-items:center;justify-content:center;gap:10px}.slider-container label{margin:0;background:#d18a8a;border-radius:50%;width:18px;height:18px;display:flex;align-items:center;justify-content:center;color:#fff}.left label{background-color:#2d7abe}.right label{background-color:#3b2dbe}audio-slider{width:90px}\n"] }]
         }], ctorParameters: () => [{ type: AudioVisualizationService }, { type: GlobalKeyboardListenerService }, { type: KeyPressService }, { type: UtilsService }, { type: i1$5.AudioVisualConfiguration, decorators: [{
                     type: Inject,
-                    args: [SYSTEM_AUDIO_VISUAL_CONFIGURATION$1]
+                    args: [SYSTEM_AUDIO_VISUAL_CONFIGURATION]
                 }] }], propDecorators: { showVolumeSliders: [{
                 type: Input
             }], isPreview: [{