dominictobias
commented
4 months ago I got it working better by following the PlaylistItem and Config types. The component says it can be either or, but it doesn't work with the Jw varieties:
import JWPlayer, { Config, PlaylistItem } from '@jwplayer/jwplayer-react-native'
import { useRef } from 'react'
import { Platform, StyleSheet } from 'react-native'
const playlistItem: PlaylistItem = {
image: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=720',
title:
'Riot’s Short Report, CoreWeave’s $1 Billion Offer and BitDeer’s ASIC Play',
mediaId: 'wlluXCqg',
description: 'There’s too much M&A in Bitcoin mining to keep track of! \n',
startTime: 0,
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-RmcetBML.mp4',
sources: [
{
file: 'https://cdn.jwplayer.com/manifests/wlluXCqg.m3u8',
label: 'audio',
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-HJ9vpqQE.mp4',
label: '180p',
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-kCeffoi3.mp4',
label: '270p',
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-KuVjSRIN.mp4',
label: '406p',
default: true,
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-RmcetBML.mp4',
label: '720p',
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-qZH7V72t.m4a',
label: '180p',
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-g7qpiU9Y.mp4',
label: '1080p',
},
],
tracks: [
{
label: 'en',
file: 'https://cdn.jwplayer.com/strips/wlluXCqg-120.vtt',
kind: 'thumbnails',
},
],
}
export function VideoPlayer() {
const jwPlayerRef = useRef<JWPlayer>(null)
const config: Config = {
license:
Platform.OS === 'android'
? process.env.EXPO_PUBLIC_LICENSE_KEY_ANDROID || ''
: process.env.EXPO_PUBLIC_LICENSE_KEY_IOS || '',
autostart: false,
playlist: [playlistItem],
backgroundAudioEnabled: true,
enableLockScreenControls: true,
pipEnabled: true,
}
return <JWPlayer ref={jwPlayerRef} style={styles.player} config={config} />
}
const styles = StyleSheet.create({
player: {
flex: 1,
borderWidth: 1,
borderColor: 'green',
},
})
Describe the bug If I have
autostart: trueI can hear the audio of the video play, but there's nothing visual except the video descriptionP.S. There are a few TS errors in the example playlist (e.g.
mediaidand should be lower case andJwSourcedoesn't havewidthorheightprops.To Reproduce
Steps to reproduce the behavior:
Expected behavior Should see a video player with a thumbnail I can press to play
Screenshots / Visual evidence
IOS
(The red border is the wrapping View)
Android
On Android the thumbnail doesn't load but the video is sized properly and I can click the play button, though it results in an error:
Desktop (please complete the following information): If you are having a build issue, we would like to know about your machine.
Device(s) affected
Additional context Add any other context about the problem here.