diff --git a/src/mixer/state.ts b/src/mixer/state.ts index 66f76ad..eb1c56e 100644 --- a/src/mixer/state.ts +++ b/src/mixer/state.ts @@ -13,6 +13,8 @@ import { Track, MYRADIO_NON_API_BASE, AuxItem } from "../api"; import { AppThunk } from "../store"; import { RootState } from "../rootReducer"; import WaveSurfer from "wavesurfer.js"; +import CursorPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.cursor.min.js'; +import RegionsPlugin from 'wavesurfer.js/dist/plugin/wavesurfer.regions.min.js'; import * as later from "later"; import NewsIntro from "../assets/audio/NewsIntro.wav"; import NewsEndCountdown from "../assets/audio/NewsEndCountdown.wav"; @@ -382,6 +384,21 @@ export const load = ( xhr: { credentials: "include", } as any, + plugins: [ + CursorPlugin.create( + { + showTime: true, + opacity: 1, + customShowTimeStyle: { + 'background-color': '#000', + color: '#fff', + padding: '2px', + 'font-size': '10px' + } + } + ), + RegionsPlugin.create({}) + ] }); wavesurfer.on("ready", () => { @@ -403,6 +420,17 @@ export const load = ( if (state.playOnLoad) { wavesurfer.play(); } + if (state.loadedItem && "intro" in state.loadedItem) { + wavesurfer.addRegion( + { + id: "intro", + resize: false, + start: 0, + end: state.loadedItem.intro, + color: 'rgba(125,0,255, 0.12)' + } + ) + } }); wavesurfer.on("play", () => { dispatch(mixerState.actions.setPlayerState({ player, state: "playing" }));