@byomakase/omakase-player 0.8.2 → 0.8.5

package/dist/api/audio-api.d.ts

@@ -13,9 +13,9 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { Api } from "./api";
-import { Observable } from "rxjs";
-import { AudioEvent } from "../types";
+import { Api } from './api';
+import { Observable } from 'rxjs';
+import { AudioEvent } from '../types';
 export interface AudioApi extends Api {
     /***
      *  Fires on audio track switched

package/dist/api/marker-lane-api.d.ts

@@ -13,12 +13,13 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { Api } from "./api";
-import { GenericMarker } from "../timeline/marker/marker";
-import { MomentMarker, MomentMarkerConfig } from "../timeline/marker/moment-marker";
-import { PeriodMarker, PeriodMarkerConfig } from "../timeline/marker/period-marker";
-import { Subject } from "rxjs";
-import { MarkerFocusEvent } from "../types";
+import { Api } from './api';
+import { GenericMarker } from '../timeline/marker/marker';
+import { MomentMarker, MomentMarkerConfig } from '../timeline/marker/moment-marker';
+import { PeriodMarker, PeriodMarkerConfig } from '../timeline/marker/period-marker';
+import { Subject } from 'rxjs';
+import { MarkerFocusEvent } from '../types';
+import { ComponentConfigStyleComposed } from '../common/component';
 export interface MarkerLaneApi extends Api {
     /***
      *  Fires on marker focus
@@ -28,12 +29,12 @@ export interface MarkerLaneApi extends Api {
      * Creates new MomentMarker instance and adds it to MarkerLane
      * @param config MomentMarker configuration
      */
-    createMomentMarker(config: MomentMarkerConfig): MomentMarker;
+    createMomentMarker(config: ComponentConfigStyleComposed<MomentMarkerConfig>): MomentMarker;
     /***
      * Creates new PeriodMarker instance and adds it to MarkerLane
      * @param config PeriodMarkern configuration
      */
-    createPeriodMarker(config: PeriodMarkerConfig): PeriodMarker;
+    createPeriodMarker(config: ComponentConfigStyleComposed<PeriodMarkerConfig>): PeriodMarker;
     /***
      * Adds Marker to MarkerLane
      * @param marker Marker instance

package/dist/api/omakase-player-api.d.ts

@@ -13,18 +13,18 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { Api } from "./api";
-import { Timeline, TimelineConfig } from "../timeline/timeline";
-import { Observable } from "rxjs";
-import { SubtitlesApi } from "./subtitles-api";
-import { VideoApi } from "./video-api";
-import { Video } from "../video/video";
-import { OmakaseEventEmitter } from "../events";
-import { OmakasePlayerEventMap, OmakasePlayerEventsType } from "../types";
-import { AudioApi } from "./audio-api";
-import { TimelineApi } from "./timeline-api";
-import { OmakasePlayerStyle } from "../omakase-player";
-import { ComponentConfigStyleComposed } from "../common/component";
+import { Api } from './api';
+import { Timeline, TimelineConfig } from '../timeline';
+import { Observable } from 'rxjs';
+import { SubtitlesApi } from './subtitles-api';
+import { VideoApi } from './video-api';
+import { Video } from '../video/video';
+import { OmakaseEventEmitter } from '../events';
+import { OmakasePlayerEventMap, OmakasePlayerEventsType } from '../types';
+import { AudioApi } from './audio-api';
+import { TimelineApi } from './timeline-api';
+import { OmakasePlayerStyle } from '../omakase-player';
+import { ComponentConfigStyleComposed } from '../common/component';
 export interface OmakasePlayerApi extends Api, OmakaseEventEmitter<OmakasePlayerEventMap> {
     /***
      * Loads new video

package/dist/api/subtitles-api.d.ts

@@ -13,10 +13,10 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { Api } from "./api";
-import { Observable } from "rxjs";
-import { OmakaseTextTrack, OmakaseTextTrackCue, SubtitlesEvent, SubtitlesVttTrackConfig } from "../types";
-import { SubtitlesVttTrack } from "../track/subtitles-vtt-track";
+import { Api } from './api';
+import { Observable } from 'rxjs';
+import { OmakaseTextTrack, OmakaseTextTrackCue, SubtitlesEvent, SubtitlesVttTrackConfig } from '../types';
+import { SubtitlesVttTrack } from '../track/subtitles-vtt-track';
 export interface SubtitlesApi extends Api {
     /***
      * Fires on subtitles create
@@ -60,15 +60,15 @@ export interface SubtitlesApi extends Api {
      * Shows active VTT track
      */
     showTrack(): any;
+    /***
+     * Hides active VTT track
+     */
+    hideTrack(): any;
     /***
      * Shows VTT track by ID
      * @param id VTT track ID
      */
     showTrack(id: string): any;
-    /***
-     * Hides active VTT track
-     */
-    hideTrack(): any;
     /***
      * Hides VTT track by ID
      * @param id VTT track ID

package/dist/api/timeline-api.d.ts

@@ -13,17 +13,18 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { Api } from "./api";
-import { Observable } from "rxjs";
-import { TimelineScrollEvent, TimelineZoomEvent } from "../types";
-import { AudioTrackLane, MarkerLane, SubtitlesLane, ThumbnailLane } from "../timeline";
-import { GenericTimelaneLane } from "../timeline/timeline-lane";
-import { TimelineStyle } from "../timeline/timeline";
-import { MarkerLaneConfig } from "../timeline/marker/marker-lane";
-import { ThumbnailLaneConfig } from "../timeline/thumbnail/thumbnail-lane";
-import { SubtitlesLaneConfig } from "../timeline/subtitles/subtitles-lane";
-import { ScrubberLane } from "../timeline/scrubber-lane";
-import { Scrollbar } from "../timeline/scrollbar";
+import { Api } from './api';
+import { Observable } from 'rxjs';
+import { TimelineScrollEvent, TimelineZoomEvent } from '../types';
+import { AudioTrackLane, MarkerLane, SubtitlesLane, ThumbnailLane } from '../timeline';
+import { GenericTimelaneLane } from '../timeline/timeline-lane';
+import { TimelineStyle } from '../timeline';
+import { MarkerLaneConfig } from '../timeline/marker/marker-lane';
+import { ThumbnailLaneConfig } from '../timeline/thumbnail/thumbnail-lane';
+import { SubtitlesLaneConfig } from '../timeline/subtitles/subtitles-lane';
+import { ScrubberLane } from '../timeline/scrubber-lane';
+import { Scrollbar } from '../timeline/scrollbar';
+import { ThumbnailVttFile } from '../track/thumbnail-vtt-file';
 export interface TimelineApi extends Api {
     /***
      *  Fires on Timeline scroll
@@ -133,4 +134,13 @@ export interface TimelineApi extends Api {
      * @param visible
      */
     toggleLeftPanelVisible(visible: boolean): void;
+    /**
+     * Return ThumbnailVttFile if set
+     */
+    getThumbnailVttFile(): ThumbnailVttFile;
+    /**
+     * Load ThumbnailVttFile by url
+     */
+    loadThumbnailsFromUrl(thumbnailVttUrl: string): Observable<boolean>;
+    destroy(): any;
 }

package/dist/api/video-api.d.ts

@@ -13,11 +13,11 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { Api } from "./api";
-import { Observable } from "rxjs";
-import { AudioEvent, HelpMenuGroup, VideoBufferingEvent, VideoEndedEvent, VideoErrorEvent, VideoLoadedEvent, VideoPlayEvent, VideoSeekedEvent, VideoSeekingEvent, VideoTimeChangeEvent } from "../types";
-import { Video } from "../video/video";
-import Hls from "hls.js";
+import { Api } from './api';
+import { Observable } from 'rxjs';
+import { AudioEvent, HelpMenuGroup, VideoBufferingEvent, VideoEndedEvent, VideoErrorEvent, VideoLoadedEvent, VideoPlayEvent, VideoSeekedEvent, VideoSeekingEvent, VideoTimeChangeEvent } from '../types';
+import { Video } from '../video/video';
+import Hls from 'hls.js';
 export interface VideoApi extends Api {
     /***
      * Fires on video load
@@ -170,7 +170,12 @@ export interface VideoApi extends Api {
      * Converts timestamp in format HH:MM:SS:FF to frame
      * @param timestamp
      */
-    convertTimestampToFrame(timestamp: string): number;
+    parseTimestampToFrame(timestamp: string): number;
+    /**
+     * Converts timestamp in format HH:MM:SS:FF to time in seconds
+     * @param timestamp
+     */
+    parseTimestamp(timestamp: string): number;
     /***
      * Returns video frame number
      * @param time Video timestamp in seconds

package/dist/audio/audio-controller.d.ts

@@ -14,10 +14,10 @@
  *       limitations under the License.
  *
  */
-import { AudioApi } from "../api/audio-api";
-import { Subject } from "rxjs";
-import { AudioEvent, Destroyable } from "../types";
-import { VideoControllerApi } from "../video/video-controller-api";
+import { AudioApi } from '../api/audio-api';
+import { Subject } from 'rxjs';
+import { AudioEvent, Destroyable } from '../types';
+import { VideoControllerApi } from '../video/video-controller-api';
 export declare class AudioController implements AudioApi, Destroyable {
     protected videoController: VideoControllerApi;
     readonly onAudioSwitched$: Subject<AudioEvent>;

package/dist/chart/chart-file.d.ts

@@ -0,0 +1,12 @@
+import { OmakaseChartFile, OgChart, OgChartCue } from '../types';
+export declare class BarChartFile implements OmakaseChartFile<OgChart> {
+    protected chart: OgChart;
+    protected cues: Map<number, OgChartCue>;
+    protected cuesKeysSorted: number[];
+    constructor(chart: OgChart);
+    hasCues(): boolean;
+    findCue(time: number): OgChartCue;
+    findCues(startTime: number, endTime: number): OgChartCue[];
+    getCues(): OgChartCue[];
+    protected findCueIndex(time: number): number;
+}

package/dist/common/component.d.ts

@@ -14,11 +14,11 @@
  *       limitations under the License.
  *
  */
-import Konva from "konva";
-import { Observable, Subject } from "rxjs";
-import { StyleAdapter } from "./style-adapter";
-import { WithOptionalPartial } from "../types/types";
-import { Destroyable } from "../types";
+import Konva from 'konva';
+import { Observable, Subject } from 'rxjs';
+import { StyleAdapter } from './style-adapter';
+import { WithOptionalPartial } from '../types';
+import { Destroyable } from '../types';
 export interface ComponentConfig<S> {
     style: S;
 }

package/dist/common/style-adapter.d.ts

@@ -14,7 +14,7 @@
  *       limitations under the License.
  *
  */
-import { Subject } from "rxjs";
+import { Subject } from 'rxjs';
 export declare class StyleAdapter<T> {
     readonly onChange$: Subject<T>;
     private _style;

package/dist/common/styles-provider.d.ts

@@ -14,8 +14,8 @@
  *       limitations under the License.
  *
  */
-import { Subject } from "rxjs";
-import { OmakasePlayerStyle } from "../omakase-player";
+import { Subject } from 'rxjs';
+import { OmakasePlayerStyle } from '../omakase-player';
 export interface Styles {
     omakasePlayerStyle: OmakasePlayerStyle;
 }

package/dist/constants.d.ts

@@ -13,12 +13,14 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { Dimension, Position } from "./common/measurement";
+import { Dimension, Position } from './common/measurement';
 export declare class Constants {
     static POSITION_TOP_LEFT: Position;
     static DIMENSION_ZERO: Dimension;
     static GOLDEN_RATIO: number;
     static TIMELINE_ZOOM_EASED_DURATION_MS: number;
     static TIMELINE_SCROLL_EASED_DURATION_MS: number;
+    static TWO_PI_RADIANS: number;
+    static FILL_LINEAR_GRADIENT_AUDIO_PEAK: (string | number)[];
     static MIME_TYPE_VND_APPLE_MPEGURL: string;
 }

package/dist/dom/fullscreen.d.ts

@@ -2,27 +2,27 @@
  * https://github.com/imbhargav5/rooks/blob/main/packages/rooks/src/hooks/useFullscreen.ts
  */
 export interface FullscreenElement {
-    requestFullscreen?: Element["requestFullscreen"];
-    webkitRequestFullscreen?: Element["requestFullscreen"];
-    webkitRequestFullScreen?: Element["requestFullscreen"];
-    mozRequestFullScreen?: Element["requestFullscreen"];
-    msRequestFullscreen?: Element["requestFullscreen"];
+    requestFullscreen?: Element['requestFullscreen'];
+    webkitRequestFullscreen?: Element['requestFullscreen'];
+    webkitRequestFullScreen?: Element['requestFullscreen'];
+    mozRequestFullScreen?: Element['requestFullscreen'];
+    msRequestFullscreen?: Element['requestFullscreen'];
 }
 export interface FullscreenDocument {
-    fullscreenEnabled?: Document["fullscreenEnabled"];
-    webkitFullscreenEnabled?: Document["fullscreenEnabled"];
-    mozFullScreenEnabled?: Document["fullscreenEnabled"];
-    msFullscreenEnabled?: Document["fullscreenEnabled"];
-    fullscreenElement?: Document["fullscreenElement"];
-    webkitFullscreenElement?: Document["fullscreenElement"];
-    webkitCurrentFullScreenElement?: Document["fullscreenElement"];
-    mozFullScreenElement?: Document["fullscreenElement"];
-    msFullscreenElement?: Document["fullscreenElement"];
-    exitFullscreen?: Document["exitFullscreen"];
-    webkitExitFullscreen?: Document["exitFullscreen"];
-    webkitCancelFullScreen?: Document["exitFullscreen"];
-    mozCancelFullScreen?: Document["exitFullscreen"];
-    msExitFullscreen?: Document["exitFullscreen"];
+    fullscreenEnabled?: Document['fullscreenEnabled'];
+    webkitFullscreenEnabled?: Document['fullscreenEnabled'];
+    mozFullScreenEnabled?: Document['fullscreenEnabled'];
+    msFullscreenEnabled?: Document['fullscreenEnabled'];
+    fullscreenElement?: Document['fullscreenElement'];
+    webkitFullscreenElement?: Document['fullscreenElement'];
+    webkitCurrentFullScreenElement?: Document['fullscreenElement'];
+    mozFullScreenElement?: Document['fullscreenElement'];
+    msFullscreenElement?: Document['fullscreenElement'];
+    exitFullscreen?: Document['exitFullscreen'];
+    webkitExitFullscreen?: Document['exitFullscreen'];
+    webkitCancelFullScreen?: Document['exitFullscreen'];
+    mozCancelFullScreen?: Document['exitFullscreen'];
+    msExitFullscreen?: Document['exitFullscreen'];
 }
 export declare class Fullscreen {
     static isFullscreenEnabled(): boolean;

package/dist/http.d.ts

@@ -13,5 +13,5 @@
  *       See the License for the specific language governing permissions and
  *       limitations under the License.
  */
-import { AxiosRequestConfig, AxiosResponse } from "axios";
+import { AxiosRequestConfig, AxiosResponse } from 'axios';
 export declare function httpGet<T, D>(url: string, config?: AxiosRequestConfig<D>): Promise<AxiosResponse<T, any>>;

package/dist/images/help.svg

@@ -1,18 +1,19 @@
 <svg width="30" height="30" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_d_313_115)">
-        <path d="M25.3001 19.16C27.5701 15.37 27.5701 10.63 25.3001 6.84C25.6501 6.52 25.6801 5.98 25.3601 5.63C25.3601 5.63 25.3401 5.61 25.3301 5.6L22.3901 2.66C22.0601 2.33 21.5201 2.33 21.1801 2.66C21.1801 2.66 21.1601 2.68 21.1501 2.69C17.3701 0.43 12.6301 0.43 8.84006 2.7C8.52006 2.35 7.99006 2.32 7.64006 2.64C7.63006 2.64 7.62006 2.66 7.61006 2.67L4.67006 5.61C4.34006 5.95 4.34006 6.49 4.67006 6.82C4.67006 6.82 4.69006 6.84 4.70006 6.85C2.43006 10.64 2.43006 15.38 4.70006 19.17C4.35006 19.49 4.32006 20.03 4.64006 20.38C4.64006 20.38 4.66006 20.4 4.67006 20.41L7.61006 23.35C7.95006 23.68 8.49006 23.68 8.82006 23.35C8.82006 23.35 8.84006 23.33 8.85006 23.32C12.6401 25.59 17.3801 25.59 21.1701 23.32C21.4901 23.67 22.0301 23.7 22.3801 23.38C22.3801 23.38 22.4001 23.36 22.4101 23.35L25.3501 20.41C25.6801 20.07 25.6801 19.53 25.3501 19.2C25.3501 19.2 25.3301 19.18 25.3201 19.18L25.3001 19.16ZM24.6501 18.58L22.2301 16.44C23.2601 14.27 23.2601 11.74 22.2301 9.57L24.6501 7.43C26.6501 10.88 26.6401 15.14 24.6501 18.59V18.58ZM21.7901 3.27L24.7301 6.2L21.5801 8.99L19.0001 6.42C19.1101 6.29 21.7801 3.28 21.7901 3.26V3.27ZM21.4101 16.16C21.2501 16.19 21.0901 16.27 20.9801 16.39L18.4001 18.97C18.2801 19.09 18.2001 19.24 18.1701 19.4C16.1801 20.38 13.8401 20.38 11.8501 19.4C11.8201 19.24 11.7401 19.08 11.6201 18.97L9.04006 16.39C8.92006 16.27 8.77006 16.19 8.61006 16.16C7.63006 14.17 7.63006 11.83 8.61006 9.84C8.77006 9.81 8.93006 9.73 9.05006 9.61L11.6301 7.03C11.7501 6.91 11.8301 6.76 11.8601 6.6C13.8501 5.62 16.1901 5.62 18.1801 6.6C18.2101 6.76 18.2901 6.92 18.4101 7.03L20.9901 9.61C21.1101 9.73 21.2601 9.81 21.4301 9.84C22.4101 11.83 22.4101 14.17 21.4301 16.16H21.4101ZM20.5801 3.35L18.4401 5.77C16.2701 4.73 13.7401 4.73 11.5701 5.77L9.43006 3.35C12.8801 1.35 17.1401 1.35 20.5901 3.35H20.5801ZM8.20006 3.27L10.9901 6.42L8.42006 9L5.26006 6.21L8.19006 3.27H8.20006ZM5.35006 7.42L7.77006 9.56C6.74006 11.73 6.74006 14.26 7.77006 16.43L5.35006 18.57C3.35006 15.12 3.35006 10.86 5.35006 7.41V7.42ZM8.21006 22.73L5.27006 19.8L8.42006 17.01L11.0001 19.58C11.0001 19.58 8.21006 22.73 8.21006 22.74V22.73ZM9.42006 22.65L11.5601 20.23C13.7301 21.27 16.2601 21.27 18.4301 20.23L20.5701 22.65C17.1201 24.65 12.8601 24.65 9.41006 22.65H9.42006ZM21.8001 22.73L19.0101 19.58L21.5801 17C21.5801 17 24.7301 19.79 24.7401 19.79L21.8101 22.73H21.8001Z"
-              fill="white"/>
-    </g>
-    <defs>
-        <filter id="filter0_d_313_115" x="0.997559" y="0.996248" width="28.0049" height="28.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-            <feOffset dy="2"/>
-            <feGaussianBlur stdDeviation="1"/>
-            <feComposite in2="hardAlpha" operator="out"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_115"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_115" result="shape"/>
-        </filter>
-    </defs>
+  <g filter="url(#filter0_d_313_115)">
+    <path
+      d="M25.3001 19.16C27.5701 15.37 27.5701 10.63 25.3001 6.84C25.6501 6.52 25.6801 5.98 25.3601 5.63C25.3601 5.63 25.3401 5.61 25.3301 5.6L22.3901 2.66C22.0601 2.33 21.5201 2.33 21.1801 2.66C21.1801 2.66 21.1601 2.68 21.1501 2.69C17.3701 0.43 12.6301 0.43 8.84006 2.7C8.52006 2.35 7.99006 2.32 7.64006 2.64C7.63006 2.64 7.62006 2.66 7.61006 2.67L4.67006 5.61C4.34006 5.95 4.34006 6.49 4.67006 6.82C4.67006 6.82 4.69006 6.84 4.70006 6.85C2.43006 10.64 2.43006 15.38 4.70006 19.17C4.35006 19.49 4.32006 20.03 4.64006 20.38C4.64006 20.38 4.66006 20.4 4.67006 20.41L7.61006 23.35C7.95006 23.68 8.49006 23.68 8.82006 23.35C8.82006 23.35 8.84006 23.33 8.85006 23.32C12.6401 25.59 17.3801 25.59 21.1701 23.32C21.4901 23.67 22.0301 23.7 22.3801 23.38C22.3801 23.38 22.4001 23.36 22.4101 23.35L25.3501 20.41C25.6801 20.07 25.6801 19.53 25.3501 19.2C25.3501 19.2 25.3301 19.18 25.3201 19.18L25.3001 19.16ZM24.6501 18.58L22.2301 16.44C23.2601 14.27 23.2601 11.74 22.2301 9.57L24.6501 7.43C26.6501 10.88 26.6401 15.14 24.6501 18.59V18.58ZM21.7901 3.27L24.7301 6.2L21.5801 8.99L19.0001 6.42C19.1101 6.29 21.7801 3.28 21.7901 3.26V3.27ZM21.4101 16.16C21.2501 16.19 21.0901 16.27 20.9801 16.39L18.4001 18.97C18.2801 19.09 18.2001 19.24 18.1701 19.4C16.1801 20.38 13.8401 20.38 11.8501 19.4C11.8201 19.24 11.7401 19.08 11.6201 18.97L9.04006 16.39C8.92006 16.27 8.77006 16.19 8.61006 16.16C7.63006 14.17 7.63006 11.83 8.61006 9.84C8.77006 9.81 8.93006 9.73 9.05006 9.61L11.6301 7.03C11.7501 6.91 11.8301 6.76 11.8601 6.6C13.8501 5.62 16.1901 5.62 18.1801 6.6C18.2101 6.76 18.2901 6.92 18.4101 7.03L20.9901 9.61C21.1101 9.73 21.2601 9.81 21.4301 9.84C22.4101 11.83 22.4101 14.17 21.4301 16.16H21.4101ZM20.5801 3.35L18.4401 5.77C16.2701 4.73 13.7401 4.73 11.5701 5.77L9.43006 3.35C12.8801 1.35 17.1401 1.35 20.5901 3.35H20.5801ZM8.20006 3.27L10.9901 6.42L8.42006 9L5.26006 6.21L8.19006 3.27H8.20006ZM5.35006 7.42L7.77006 9.56C6.74006 11.73 6.74006 14.26 7.77006 16.43L5.35006 18.57C3.35006 15.12 3.35006 10.86 5.35006 7.41V7.42ZM8.21006 22.73L5.27006 19.8L8.42006 17.01L11.0001 19.58C11.0001 19.58 8.21006 22.73 8.21006 22.74V22.73ZM9.42006 22.65L11.5601 20.23C13.7301 21.27 16.2601 21.27 18.4301 20.23L20.5701 22.65C17.1201 24.65 12.8601 24.65 9.41006 22.65H9.42006ZM21.8001 22.73L19.0101 19.58L21.5801 17C21.5801 17 24.7301 19.79 24.7401 19.79L21.8101 22.73H21.8001Z"
+      fill="white"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_313_115" x="0.997559" y="0.996248" width="28.0049" height="28.0263" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="2"/>
+      <feGaussianBlur stdDeviation="1"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_115"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_115" result="shape"/>
+    </filter>
+  </defs>
 </svg>

package/dist/images/loading.svg

@@ -1,32 +1,33 @@
 <svg width="113" height="113" viewBox="0 0 113 113" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g clip-path="url(#clip0_313_105)" filter="url(#filter0_d_313_105)">
-        <path d="M56.5001 0C54.7134 0 53.2654 1.44798 53.2654 3.23468V22.9391C53.2654 24.7258 54.7134 26.1738 56.5001 26.1738C58.2868 26.1738 59.7347 24.7258 59.7347 22.9391V3.23468C59.7347 1.44798 58.2868 0 56.5001 0Z" fill="white"/>
-        <path d="M93.6225 19.95C94.8842 18.6883 94.8842 16.6391 93.6225 15.3774C92.3608 14.1157 90.3116 14.1157 89.0499 15.3774L75.112 29.3153C73.8503 30.577 73.8503 32.6262 75.112 33.8879C76.3314 35.1073 78.4568 35.1073 79.6846 33.8879L93.6225 19.95Z" fill="white"/>
-        <path d="M23.95 15.3774C23.3234 14.7508 22.4936 14.429 21.6637 14.429C20.8339 14.429 20.004 14.7423 19.3774 15.3774C18.1157 16.6391 18.1157 18.6883 19.3774 19.95L33.3153 33.8879C34.5347 35.1073 36.6686 35.1073 37.8879 33.8879C39.1496 32.6262 39.1496 30.577 37.8879 29.3153L23.95 15.3774Z"
-              fill="white"/>
-        <path d="M4 52.5C4 54.2867 5.44798 55.7347 7.23468 55.7347H26.9391C28.7258 55.7347 30.1738 54.2867 30.1738 52.5C30.1738 50.7133 28.7258 49.2653 26.9391 49.2653H7.23468C5.44798 49.2653 4 50.7133 4 52.5Z" fill="white"/>
-        <path d="M37.8795 75.6847C39.1412 74.423 39.1412 72.3738 37.8795 71.1121C36.6178 69.8504 34.5686 69.8504 33.3069 71.1121L19.369 85.05C18.7594 85.6597 18.4207 86.4726 18.4207 87.3363C18.4207 88.2 18.7594 89.0129 19.369 89.6226C20.5884 90.8419 22.7138 90.8419 23.9416 89.6226L37.8795 75.6847Z"
-              fill="white"/>
-        <g opacity="0.3">
-            <path d="M105.765 49.2653H86.0609C84.2742 49.2653 82.8262 50.7133 82.8262 52.5C82.8262 54.2867 84.2742 55.7347 86.0609 55.7347H105.765C107.552 55.7347 109 54.2867 109 52.5C109 50.7133 107.552 49.2653 105.765 49.2653Z" fill="white"/>
-            <path d="M94.5709 87.3363C94.5709 86.4726 94.2322 85.6597 93.6225 85.05L79.6846 71.1121C79.0749 70.5024 78.262 70.1637 77.3983 70.1637C76.5346 70.1637 75.7217 70.5024 75.112 71.1121C73.8503 72.3738 73.8503 74.423 75.112 75.6847L89.0499 89.6226C90.2693 90.8419 92.3947 90.8419 93.6225 89.6226C94.2322 89.0129 94.5709 88.2 94.5709 87.3363Z"
-                  fill="white"/>
-            <path d="M56.5001 78.8262C54.7134 78.8262 53.2654 80.2742 53.2654 82.0609V101.765C53.2654 103.552 54.7134 105 56.5001 105C58.2868 105 59.7347 103.552 59.7347 101.765V82.0609C59.7347 80.2742 58.2868 78.8262 56.5001 78.8262Z" fill="white"/>
-        </g>
+  <g clip-path="url(#clip0_313_105)" filter="url(#filter0_d_313_105)">
+    <path d="M56.5001 0C54.7134 0 53.2654 1.44798 53.2654 3.23468V22.9391C53.2654 24.7258 54.7134 26.1738 56.5001 26.1738C58.2868 26.1738 59.7347 24.7258 59.7347 22.9391V3.23468C59.7347 1.44798 58.2868 0 56.5001 0Z" fill="white"/>
+    <path d="M93.6225 19.95C94.8842 18.6883 94.8842 16.6391 93.6225 15.3774C92.3608 14.1157 90.3116 14.1157 89.0499 15.3774L75.112 29.3153C73.8503 30.577 73.8503 32.6262 75.112 33.8879C76.3314 35.1073 78.4568 35.1073 79.6846 33.8879L93.6225 19.95Z" fill="white"/>
+    <path d="M23.95 15.3774C23.3234 14.7508 22.4936 14.429 21.6637 14.429C20.8339 14.429 20.004 14.7423 19.3774 15.3774C18.1157 16.6391 18.1157 18.6883 19.3774 19.95L33.3153 33.8879C34.5347 35.1073 36.6686 35.1073 37.8879 33.8879C39.1496 32.6262 39.1496 30.577 37.8879 29.3153L23.95 15.3774Z"
+          fill="white"/>
+    <path d="M4 52.5C4 54.2867 5.44798 55.7347 7.23468 55.7347H26.9391C28.7258 55.7347 30.1738 54.2867 30.1738 52.5C30.1738 50.7133 28.7258 49.2653 26.9391 49.2653H7.23468C5.44798 49.2653 4 50.7133 4 52.5Z" fill="white"/>
+    <path d="M37.8795 75.6847C39.1412 74.423 39.1412 72.3738 37.8795 71.1121C36.6178 69.8504 34.5686 69.8504 33.3069 71.1121L19.369 85.05C18.7594 85.6597 18.4207 86.4726 18.4207 87.3363C18.4207 88.2 18.7594 89.0129 19.369 89.6226C20.5884 90.8419 22.7138 90.8419 23.9416 89.6226L37.8795 75.6847Z"
+          fill="white"/>
+    <g opacity="0.3">
+      <path d="M105.765 49.2653H86.0609C84.2742 49.2653 82.8262 50.7133 82.8262 52.5C82.8262 54.2867 84.2742 55.7347 86.0609 55.7347H105.765C107.552 55.7347 109 54.2867 109 52.5C109 50.7133 107.552 49.2653 105.765 49.2653Z" fill="white"/>
+      <path
+        d="M94.5709 87.3363C94.5709 86.4726 94.2322 85.6597 93.6225 85.05L79.6846 71.1121C79.0749 70.5024 78.262 70.1637 77.3983 70.1637C76.5346 70.1637 75.7217 70.5024 75.112 71.1121C73.8503 72.3738 73.8503 74.423 75.112 75.6847L89.0499 89.6226C90.2693 90.8419 92.3947 90.8419 93.6225 89.6226C94.2322 89.0129 94.5709 88.2 94.5709 87.3363Z"
+        fill="white"/>
+      <path d="M56.5001 78.8262C54.7134 78.8262 53.2654 80.2742 53.2654 82.0609V101.765C53.2654 103.552 54.7134 105 56.5001 105C58.2868 105 59.7347 103.552 59.7347 101.765V82.0609C59.7347 80.2742 58.2868 78.8262 56.5001 78.8262Z" fill="white"/>
     </g>
-    <defs>
-        <filter id="filter0_d_313_105" x="0" y="0" width="113" height="113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-            <feOffset dy="4"/>
-            <feGaussianBlur stdDeviation="2"/>
-            <feComposite in2="hardAlpha" operator="out"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_105"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_105" result="shape"/>
-        </filter>
-        <clipPath id="clip0_313_105">
-            <rect width="105" height="105" fill="white" transform="translate(4)"/>
-        </clipPath>
-    </defs>
+  </g>
+  <defs>
+    <filter id="filter0_d_313_105" x="0" y="0" width="113" height="113" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_313_105"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_313_105" result="shape"/>
+    </filter>
+    <clipPath id="clip0_313_105">
+      <rect width="105" height="105" fill="white" transform="translate(4)"/>
+    </clipPath>
+  </defs>
 </svg>

package/dist/images/pause.svg

@@ -1,20 +1,21 @@
 <svg width="114" height="114" viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_d_261_534)">
-        <path d="M57.0001 0.320007C27.9526 0.320007 4.32007 23.9525 4.32007 53C4.32007 82.0475 27.9526 105.68 57.0001 105.68C86.0476 105.68 109.68 82.0475 109.68 53C109.68 23.9525 86.0476 0.320007 57.0001 0.320007ZM57.0001 103.18C29.3301 103.18 6.82007 80.67 6.82007 53C6.82007 25.33 29.3301 2.82001 57.0001 2.82001C84.6701 2.82001 107.18 25.33 107.18 53C107.18 80.67 84.6701 103.18 57.0001 103.18Z"
-              fill="white"/>
-        <path d="M80.49 28.9H65.425C64.735 28.9 64.175 29.46 64.175 30.15V75.85C64.175 76.54 64.735 77.1 65.425 77.1H80.49C81.18 77.1 81.74 76.54 81.74 75.85V30.15C81.74 29.4575 81.18 28.9 80.49 28.9ZM79.24 74.6H66.675V31.4H79.24V74.6Z" fill="white"/>
-        <path d="M48.575 28.9H33.51C32.82 28.9 32.26 29.46 32.26 30.15V75.85C32.26 76.54 32.82 77.1 33.51 77.1H48.575C49.265 77.1 49.825 76.54 49.825 75.85V30.15C49.825 29.4575 49.265 28.9 48.575 28.9ZM47.325 74.6H34.76V31.4H47.325V74.6Z" fill="white"/>
-    </g>
-    <defs>
-        <filter id="filter0_d_261_534" x="0.320068" y="0.320007" width="113.36" height="113.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-            <feOffset dy="4"/>
-            <feGaussianBlur stdDeviation="2"/>
-            <feComposite in2="hardAlpha" operator="out"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_261_534"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_261_534" result="shape"/>
-        </filter>
-    </defs>
+  <g filter="url(#filter0_d_261_534)">
+    <path
+      d="M57.0001 0.320007C27.9526 0.320007 4.32007 23.9525 4.32007 53C4.32007 82.0475 27.9526 105.68 57.0001 105.68C86.0476 105.68 109.68 82.0475 109.68 53C109.68 23.9525 86.0476 0.320007 57.0001 0.320007ZM57.0001 103.18C29.3301 103.18 6.82007 80.67 6.82007 53C6.82007 25.33 29.3301 2.82001 57.0001 2.82001C84.6701 2.82001 107.18 25.33 107.18 53C107.18 80.67 84.6701 103.18 57.0001 103.18Z"
+      fill="white"/>
+    <path d="M80.49 28.9H65.425C64.735 28.9 64.175 29.46 64.175 30.15V75.85C64.175 76.54 64.735 77.1 65.425 77.1H80.49C81.18 77.1 81.74 76.54 81.74 75.85V30.15C81.74 29.4575 81.18 28.9 80.49 28.9ZM79.24 74.6H66.675V31.4H79.24V74.6Z" fill="white"/>
+    <path d="M48.575 28.9H33.51C32.82 28.9 32.26 29.46 32.26 30.15V75.85C32.26 76.54 32.82 77.1 33.51 77.1H48.575C49.265 77.1 49.825 76.54 49.825 75.85V30.15C49.825 29.4575 49.265 28.9 48.575 28.9ZM47.325 74.6H34.76V31.4H47.325V74.6Z" fill="white"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_261_534" x="0.320068" y="0.320007" width="113.36" height="113.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_261_534"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_261_534" result="shape"/>
+    </filter>
+  </defs>
 </svg>

package/dist/images/play.svg

@@ -1,20 +1,22 @@
 <svg width="114" height="114" viewBox="0 0 114 114" fill="none" xmlns="http://www.w3.org/2000/svg">
-    <g filter="url(#filter0_d_261_530)">
-        <path d="M57.0001 0.320007C27.9526 0.320007 4.32007 23.9525 4.32007 53C4.32007 82.0475 27.9526 105.68 57.0001 105.68C86.0476 105.68 109.68 82.0475 109.68 53C109.68 23.9525 86.0476 0.320007 57.0001 0.320007ZM57.0001 103.18C29.3301 103.18 6.82007 80.67 6.82007 53C6.82007 25.33 29.3301 2.82001 57.0001 2.82001C84.6701 2.82001 107.18 25.33 107.18 53C107.18 80.67 84.6701 103.18 57.0001 103.18Z"
-              fill="white"/>
-        <path d="M81.9476 51.9175L43.6801 29.825C43.2926 29.6025 42.8176 29.6025 42.4301 29.825C42.0426 30.0475 41.8051 30.46 41.8051 30.9075V75.0925C41.8051 75.54 42.0426 75.9525 42.4301 76.175C42.6226 76.2875 42.8401 76.3425 43.0551 76.3425C43.2701 76.3425 43.4876 76.2875 43.6801 76.175L81.9451 54.0825C82.3326 53.86 82.5701 53.4475 82.5701 53C82.5701 52.5525 82.3326 52.14 81.9476 51.9175ZM44.3051 72.9275V33.0725L78.8226 53L44.3051 72.9275Z"
-              fill="white"/>
-    </g>
-    <defs>
-        <filter id="filter0_d_261_530" x="0.320068" y="0.320007" width="113.36" height="113.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
-            <feFlood flood-opacity="0" result="BackgroundImageFix"/>
-            <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
-            <feOffset dy="4"/>
-            <feGaussianBlur stdDeviation="2"/>
-            <feComposite in2="hardAlpha" operator="out"/>
-            <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
-            <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_261_530"/>
-            <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_261_530" result="shape"/>
-        </filter>
-    </defs>
+  <g filter="url(#filter0_d_261_530)">
+    <path
+      d="M57.0001 0.320007C27.9526 0.320007 4.32007 23.9525 4.32007 53C4.32007 82.0475 27.9526 105.68 57.0001 105.68C86.0476 105.68 109.68 82.0475 109.68 53C109.68 23.9525 86.0476 0.320007 57.0001 0.320007ZM57.0001 103.18C29.3301 103.18 6.82007 80.67 6.82007 53C6.82007 25.33 29.3301 2.82001 57.0001 2.82001C84.6701 2.82001 107.18 25.33 107.18 53C107.18 80.67 84.6701 103.18 57.0001 103.18Z"
+      fill="white"/>
+    <path
+      d="M81.9476 51.9175L43.6801 29.825C43.2926 29.6025 42.8176 29.6025 42.4301 29.825C42.0426 30.0475 41.8051 30.46 41.8051 30.9075V75.0925C41.8051 75.54 42.0426 75.9525 42.4301 76.175C42.6226 76.2875 42.8401 76.3425 43.0551 76.3425C43.2701 76.3425 43.4876 76.2875 43.6801 76.175L81.9451 54.0825C82.3326 53.86 82.5701 53.4475 82.5701 53C82.5701 52.5525 82.3326 52.14 81.9476 51.9175ZM44.3051 72.9275V33.0725L78.8226 53L44.3051 72.9275Z"
+      fill="white"/>
+  </g>
+  <defs>
+    <filter id="filter0_d_261_530" x="0.320068" y="0.320007" width="113.36" height="113.36" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
+      <feFlood flood-opacity="0" result="BackgroundImageFix"/>
+      <feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
+      <feOffset dy="4"/>
+      <feGaussianBlur stdDeviation="2"/>
+      <feComposite in2="hardAlpha" operator="out"/>
+      <feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.65 0"/>
+      <feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_261_530"/>
+      <feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_261_530" result="shape"/>
+    </filter>
+  </defs>
 </svg>