Add video playback #74
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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,134 @@ | ||
| <template> | ||
| <v-container fill-height fluid class="pa-0"> | ||
| <div ref="videoContainer"> | ||
| <video ref="videoPlayer" :poster="poster" autoplay></video> | ||
| </div> | ||
| </v-container> | ||
| </template> | ||
|
|
||
| <script lang="ts"> | ||
| import Vue from 'vue'; | ||
| import { stringify } from 'qs'; | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| import shaka from 'shaka-player/dist/shaka-player.ui'; | ||
| // eslint-disable-next-line @typescript-eslint/ban-ts-comment | ||
| // @ts-ignore | ||
| import muxjs from 'mux.js'; | ||
| import 'shaka-player/dist/controls.css'; | ||
|
|
||
| declare global { | ||
| interface Window { | ||
| // eslint-disable-next-line @typescript-eslint/no-explicit-any | ||
| muxjs: any; | ||
| } | ||
| } | ||
|
|
||
| export default Vue.extend({ | ||
| props: { | ||
| item: { | ||
| type: Object, | ||
| required: true | ||
| }, | ||
| poster: { | ||
| type: String, | ||
| default: '' | ||
| } | ||
| }, | ||
| data() { | ||
| return { | ||
| source: '', | ||
| player: null as any, | ||
| ui: null as any | ||
| }; | ||
| }, | ||
| watch: { | ||
| async source(newSource) { | ||
| if (this.player) { | ||
| try { | ||
| await this.player.load(newSource); | ||
| } catch (e) { | ||
| console.error('Error code', e.code, 'object', e); | ||
| } | ||
| } | ||
| } | ||
| }, | ||
| async mounted() { | ||
| try { | ||
| const response = await this.$api.mediaInfo.getPostedPlaybackInfo({ | ||
| itemId: this.$route.params.itemId, | ||
| userId: this.$auth.user.Id, | ||
| deviceProfileDto: { | ||
| DeviceProfile: this.$playbackProfile | ||
| } | ||
| }); | ||
|
|
||
| let mediaSource; | ||
| if (response?.data?.MediaSources) { | ||
| mediaSource = response.data.MediaSources[0]; | ||
| } else { | ||
| throw new Error("This item can't be played."); | ||
| } | ||
|
|
||
| if (mediaSource.SupportsDirectStream) { | ||
| const directOptions: Record<string, any> = { | ||
| Static: true, | ||
| mediaSourceId: mediaSource.Id, | ||
| deviceId: this.$store.state.deviceProfile.deviceId, | ||
| api_key: this.$store.state.user.accessToken | ||
| }; | ||
|
|
||
| if (mediaSource.ETag) { | ||
| directOptions.Tag = mediaSource.ETag; | ||
| } | ||
|
|
||
| if (mediaSource.LiveStreamId) { | ||
| directOptions.LiveStreamId = mediaSource.LiveStreamId; | ||
| } | ||
|
|
||
| const params = stringify(directOptions); | ||
| this.source = `${this.$axios.defaults.baseURL}/Videos/${mediaSource.Id}/stream.${mediaSource.Container}?${params}`; | ||
| } else if ( | ||
| mediaSource.SupportsTranscoding && | ||
| mediaSource.TranscodingUrl | ||
| ) { | ||
| this.source = this.$axios.defaults.baseURL + mediaSource.TranscodingUrl; | ||
| } | ||
| window.muxjs = muxjs; | ||
| shaka.polyfill.installAll(); | ||
| if (shaka.Player.isBrowserSupported()) { | ||
| // Everything looks good! | ||
| this.player = new shaka.Player(this.$refs.videoPlayer); | ||
| this.ui = new shaka.ui.Overlay( | ||
| this.player, | ||
| this.$refs.videoContainer, | ||
| this.$refs.videoPlayer | ||
| ); | ||
| } else { | ||
| this.$nuxt.error({ | ||
| message: this.$t('browserNotSupported') as string | ||
| }); | ||
| } | ||
| } catch (error) { | ||
| this.$nuxt.error({ | ||
| statusCode: 404, | ||
| message: error | ||
| }); | ||
| } | ||
| }, | ||
| beforeDestroy() { | ||
| if (this.player) { | ||
| window.muxjs = undefined; | ||
| this.player.unload(); | ||
| this.player.destroy(); | ||
| } | ||
| } | ||
| }); | ||
| </script> | ||
|
|
||
| <style scoped> | ||
| video { | ||
| width: 100vw; | ||
| height: 100vh; | ||
| } | ||
|
There was a problem hiding this comment. I assume you have tested this, but just to be sure... have you considered overflowing in some browsers? There was a problem hiding this comment. I didn't, but we probably need to account for safe areas, yeah. |
||
| </style> | ||
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 |
|---|---|---|
| @@ -1,34 +1,35 @@ | ||
| { | ||
| "alphabetically": "Alphabetically", | ||
| "badRequest": "Bad request. Try again", | ||
| "browserNotSupported": "Your browser is not supported for playing this file.", | ||
| "continueListening": "Continue listening", | ||
| "continueWatching": "Continue watching", | ||
| "endDate": "End date", | ||
| "endsAt": "Ends at {time}", | ||
| "episodeNumber": "Episode {episodeNumber}", | ||
| "home": "Home", | ||
| "incorrectUsernameOrPassword": "Incorrect username or password", | ||
| "itemNotFound": "Item not found", | ||
| "libraryEmpty": "This library is empty", | ||
| "libraryNotFound": "Library not found", | ||
| "login": "Login", | ||
| "logout": "Logout", | ||
| "more": "More", | ||
| "moreLikeThis": "More like this", | ||
| "password": "Password", | ||
| "play": "Play", | ||
| "playType": "Play {mediaType}", | ||
| "present": "Present", | ||
| "rating": "Rating", | ||
| "releaseDate": "Release date", | ||
| "serverAddress": "Server address", | ||
| "serverAddressMustBeUrl": "Server address must be a valid URL", | ||
| "serverAddressRequired": "Server address is required", | ||
| "serverNotFound": "Server not found", | ||
| "settings": "Settings", | ||
| "signIn": "Sign in", | ||
| "unexpectedError": "Unexpected error", | ||
| "upNext": "Up next", | ||
| "username": "Username", | ||
| "usernameRequired": "Username is required" | ||
| } |
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 |
|---|---|---|
| @@ -1,30 +1,34 @@ | ||
| { | ||
| "alphabetically": "", | ||
| "badRequest": "Virheellinen pyyntö. Yritä uudelleen", | ||
| "continueListening": "Jatka kuuntelua", | ||
| "continueWatching": "Jatka katselua", | ||
| "endDate": "", | ||
| "endsAt": "Päättyy {time}", | ||
| "episodeNumber": "Jakso {episodeNumber}", | ||
| "home": "Koti", | ||
| "incorrectUsernameOrPassword": "Väärä käyttäjätunnus tai salasana", | ||
| "itemNotFound": "Kohdetta ei löydy", | ||
| "libraryEmpty": "Kirjasto on tyhjä", | ||
| "libraryNotFound": "Kirjastoa ei löydy", | ||
| "login": "Kirjaudu", | ||
| "logout": "Kirjaudu ulos", | ||
| "more": "Lisää", | ||
| "moreLikeThis": "Lisää samanlaisia", | ||
| "password": "Salasana", | ||
| "play": "Toista", | ||
| "playType": "Toista {mediaType}", | ||
| "present": "Nykyinen", | ||
| "rating": "", | ||
| "releaseDate": "", | ||
| "serverAddress": "Palvelinosoite", | ||
| "serverAddressMustBeUrl": "Palvelinosoitteen on oltava kelvollinen URL-osoite", | ||
| "serverAddressRequired": "Palvelinosoite vaaditaan", | ||
| "serverNotFound": "Palvelinta ei löydy", | ||
| "settings": "Asetukset", | ||
| "signIn": "Kirjaudu sisään", | ||
| "unexpectedError": "Odottamaton virhe", | ||
| "upNext": "Seuraava", | ||
| "username": "Käyttäjätunnus", | ||
| "usernameRequired": "Käyttäjänimi vaaditaan" | ||
| } |
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 |
|---|---|---|
| @@ -1,29 +1,34 @@ | ||
| { | ||
| "alphabetically": "", | ||
| "badRequest": "Onjuist verzoek. Probeer het opnieuw", | ||
| "continueListening": "Verder luisteren", | ||
| "continueWatching": "Verder kijken", | ||
| "endDate": "", | ||
| "endsAt": "Eindigt om {time}", | ||
| "episodeNumber": "Aflevering {episodeNumber}", | ||
| "home": "Home", | ||
| "incorrectUsernameOrPassword": "Onjuiste gebruikersnaam en/of wachtwoord", | ||
| "itemNotFound": "Item niet gevonden", | ||
| "libraryEmpty": "", | ||
| "libraryNotFound": "Bibliotheek niet gevonden", | ||
| "login": "Inloggen", | ||
| "logout": "Uitloggen", | ||
| "more": "Meer", | ||
| "moreLikeThis": "Meer zoals dit", | ||
| "password": "Wachtwoord", | ||
| "play": "Afspelen", | ||
| "playType": "Speel {mediaType}", | ||
| "present": "Huidig", | ||
| "rating": "", | ||
| "releaseDate": "", | ||
| "serverAddress": "Server adres", | ||
| "serverAddressMustBeUrl": "Server adres moet een geldige URL zijn", | ||
| "serverAddressRequired": "Server adres is verplicht", | ||
| "serverNotFound": "Server niet gevonden", | ||
| "settings": "Instellingen", | ||
| "signIn": "Inloggen", | ||
| "unexpectedError": "Onverwachte fout", | ||
| "upNext": "Volgende", | ||
| "username": "Gebruikersnaam", | ||
| "usernameRequired": "Gebruikersnaam is verplicht" | ||
| } |
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 |
|---|---|---|
| @@ -1,27 +1,34 @@ | ||
| { | ||
| "alphabetically": "", | ||
| "badRequest": "Błędne żądanie. Spróbuj ponownie", | ||
| "continueListening": "Kontynuuj słuchanie", | ||
| "continueWatching": "Kontynuuj odtwarzanie", | ||
| "endDate": "", | ||
| "endsAt": "", | ||
| "episodeNumber": "Odcinek {episodeNumber}", | ||
| "home": "Start", | ||
| "incorrectUsernameOrPassword": "Błędna nazwa użytkownika lub hasło", | ||
| "itemNotFound": "Nie znaleziono", | ||
| "libraryEmpty": "", | ||
| "libraryNotFound": "Biblioteka nie została znaleziona", | ||
| "login": "Logowanie", | ||
| "logout": "Wyloguj", | ||
| "more": "Więcej", | ||
| "moreLikeThis": "", | ||
| "password": "Hasło", | ||
| "play": "Odtwarzaj", | ||
| "playType": "Odtwarzaj {mediaType}", | ||
| "present": "Teraz", | ||
| "rating": "", | ||
| "releaseDate": "", | ||
| "serverAddress": "Adres serwera", | ||
| "serverAddressMustBeUrl": "Adres serwera musi być poprawnym adresem URL", | ||
| "serverAddressRequired": "Adres serwera jest wymagany", | ||
| "serverNotFound": "Serwer nie został znaleziony", | ||
| "settings": "Ustawienia", | ||
| "signIn": "Zaloguj", | ||
| "unexpectedError": "Niespodziewany błąd", | ||
| "upNext": "Następnie", | ||
| "username": "Nazwa użytkownika", | ||
| "usernameRequired": "Nazwa użytkownika jest wymagana" | ||
| } |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Have you considered adding the shaka-player types? ( first hit: https://github.com/niklaskorz/shaka-player/tree/feature/generate-typescript-typedefs/test/typescript )
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I have, but unfortunately that repository is severely out of date. We also prefer to stick with the upstream versions of packages.
The Shaka team does intend to ship typings very soon, however, so this will be fixed when the next version of Shaka Player is released (but that's a guess based on recent activity on their repository)