-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
092d7e7
commit 0bb49b3
Showing
6 changed files
with
197 additions
and
95 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
42 changes: 42 additions & 0 deletions
42
packages/ui/src/services/MediaPlayerService/IMediaPlayerService.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| import { Signal } from '@preact/signals-react'; | ||
| import { IVideoFile } from 'ipmc-interfaces'; | ||
|
|
||
| export const IMediaPlayerServiceSymbol = Symbol.for('MediaPlayerSymbol'); | ||
|
|
||
| /** | ||
| * Service to controll media playback. | ||
| */ | ||
| export interface IMediaPlayerService { | ||
| /** | ||
| * Initializes a video player. | ||
| * @param el Video element to use. | ||
| * @param file File to play. | ||
| */ | ||
| initializeVideo(el: HTMLVideoElement, file: IVideoFile): () => void; | ||
|
|
||
| /** | ||
| * Toggles play state. | ||
| */ | ||
| togglePlay(): void; | ||
|
|
||
| /** | ||
| * Select a subtitle track. | ||
| * @param trackName Subtitle track to use (undefined if none). | ||
| */ | ||
| selectSubtitle(trackName?: string): void; | ||
|
|
||
| /** | ||
| * Available languages, only available for videos. | ||
| */ | ||
| languages: Signal<any[]>; | ||
|
|
||
| /** | ||
| * Available subtitles, only available for videos. | ||
| */ | ||
| subtitles: Signal<any[]>; | ||
|
|
||
| /** | ||
| * Whether or not media is currently playing. | ||
| */ | ||
| playing: Signal<boolean>; | ||
| } |
113 changes: 113 additions & 0 deletions
113
packages/ui/src/services/MediaPlayerService/MediaPlayerService.ts
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,113 @@ | ||
| import { Signal } from '@preact/signals-react'; | ||
| import { inject, injectable } from 'inversify'; | ||
| import { type IIpfsService, IIpfsServiceSymbol, type ILogService, ILogServiceSymbol, IVideoFile } from 'ipmc-interfaces'; | ||
| import { IMediaPlayerService } from './IMediaPlayerService'; | ||
| //@ts-ignore | ||
| import shaka from 'shaka-player'; | ||
|
|
||
| type Request = shaka.extern.Request; | ||
| type RequestType = shaka.net.NetworkingEngine.RequestType; | ||
| type ProgressUpdated = shaka.extern.ProgressUpdated; | ||
| type HeadersReceived = shaka.extern.HeadersReceived; | ||
| type SchemePluginConfig = shaka.extern.SchemePluginConfig; | ||
|
|
||
| @injectable() | ||
| export class MediaPlayerService implements IMediaPlayerService { | ||
| public constructor( | ||
| @inject(IIpfsServiceSymbol) private readonly ipfs: IIpfsService, | ||
| @inject(ILogServiceSymbol) private readonly log: ILogService, | ||
| ) { | ||
| this.shakaPlugin = this.shakaPlugin.bind(this); | ||
| shaka.net.NetworkingEngine.registerScheme('ipfs', this.shakaPlugin, 1, false); | ||
| } | ||
|
|
||
| public initializeVideo(el: HTMLVideoElement, file: IVideoFile): () => void { | ||
| this.videoEl = el; | ||
| const player = new shaka.Player(); | ||
| this.player = player; | ||
| player.addEventListener('error', (error: any) => this.log.error(`Error code ${error.code} object ${error}`)); | ||
| player.configure({ | ||
| streaming: { | ||
| rebufferingGoal: 5, | ||
| bufferingGoal: 30, | ||
| } | ||
| }); | ||
| player.attach(el) | ||
| .then(() => player.load(`ipfs://${file.cid}/${file.video.name}`)) | ||
| .then(() => { | ||
| this.subtitles.value = player.getTextTracks(); | ||
| this.languages.value = player.getAudioLanguages(); | ||
| }) | ||
| .catch((ex: any) => { | ||
| this.log.error(ex); | ||
| }); | ||
|
|
||
| return () => { | ||
| this.languages.value = []; | ||
| this.subtitles.value = []; | ||
| this.videoEl = undefined; | ||
| this.player = undefined; | ||
| player.unload(); | ||
| player.destroy(); | ||
| this.playing.value = false; | ||
| }; | ||
| } | ||
|
|
||
| public togglePlay() { | ||
| if (this.videoEl) { | ||
| if (this.playing.value) { | ||
| this.videoEl.pause(); | ||
| this.playing.value = false; | ||
| } else { | ||
| this.videoEl?.play() | ||
| .then(() => { | ||
| this.playing.value = true; | ||
| }); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| public selectSubtitle(trackName?: string) { | ||
| if (trackName) { | ||
| this.player.value.selectTextTrack(trackName); | ||
| this.player.value.setTextTrackVisibility(true); | ||
| } else { | ||
| this.player.value.setTextTrackVisibility(false); | ||
| } | ||
|
|
||
| } | ||
|
|
||
| public languages = new Signal([]); | ||
|
|
||
| public subtitles = new Signal([]); | ||
|
|
||
| public playing = new Signal(false); | ||
|
|
||
| private async shakaPlugin( | ||
| uri: string, | ||
| request: Request, | ||
| requestType: RequestType, | ||
| progressUpdated: ProgressUpdated, | ||
| headersReceived: HeadersReceived, | ||
| config: SchemePluginConfig | ||
| ) { | ||
| const fullPath = uri.substring(uri.indexOf('://') + 3); | ||
| const paths = fullPath.split('/'); | ||
| const cid = paths.shift()!; | ||
| const path = paths.join('/'); | ||
|
|
||
| headersReceived({}); | ||
|
|
||
| const data = await this.ipfs.fetch(cid, path); | ||
|
|
||
| return { | ||
| uri: uri, | ||
| originalUri: uri, | ||
| data: data, | ||
| status: 200, | ||
| }; | ||
| }; | ||
|
|
||
| private videoEl: HTMLVideoElement | undefined; | ||
| private player: shaka.Player | undefined; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,2 @@ | ||
| export { type IMediaPlayerService, IMediaPlayerServiceSymbol } from './IMediaPlayerService'; | ||
| export { MediaPlayerService } from './MediaPlayerService'; |
Oops, something went wrong.