[BUG] iOS: wrong size, no thumbnail, not clickable. Android: no thumbnail, error on play
Closed this issue · 1 comments
dominictobias commented
Describe the bug
If I have autostart: true I can hear the audio of the video play, but there's nothing visual except the video description
P.S. There are a few TS errors in the example playlist (e.g. mediaid and should be lower case and JwSource doesn't have width or height props.
To Reproduce
import JWPlayer, {
JwConfig,
JwPlaylistItem,
} from '@jwplayer/jwplayer-react-native'
import { useRef } from 'react'
import { Platform, StyleSheet, View } from 'react-native'
const playlistItem: JwPlaylistItem = {
arc_document_id: 'PUZV5LPZUZEK5E5YK3GZYOCCZA',
cdtv_show: '',
cdtv_type: 'episode',
channel_type: 'cdtv',
event_date: '',
event_name: '',
event_track: '',
status: 'draft',
image: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=720',
images: [
{
src: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=320',
width: 320,
type: 'image/jpeg',
},
{
src: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=480',
width: 480,
type: 'image/jpeg',
},
{
src: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=640',
width: 640,
type: 'image/jpeg',
},
{
src: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=720',
width: 720,
type: 'image/jpeg',
},
{
src: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=1280',
width: 1280,
type: 'image/jpeg',
},
{
src: 'https://cdn.jwplayer.com/v2/media/wlluXCqg/poster.jpg?width=1920',
width: 1920,
type: 'image/jpeg',
},
],
title:
'Riot’s Short Report, CoreWeave’s $1 Billion Offer and BitDeer’s ASIC Play',
mediaid: 'wlluXCqg',
link: '',
duration: 2131.58,
pubdate: 1717739098,
description: 'There’s too much M&A in Bitcoin mining to keep track of! \n',
tags: 'theminingpod_TV',
sources: [
{
file: 'https://cdn.jwplayer.com/manifests/wlluXCqg.m3u8',
type: 'application/vnd.apple.mpegurl',
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-HJ9vpqQE.mp4',
type: 'video/mp4',
width: 320,
height: 180,
label: '180p',
bitrate: 251851,
framerate: 30,
filesize: 67086873,
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-kCeffoi3.mp4',
type: 'video/mp4',
width: 480,
height: 270,
label: '270p',
bitrate: 359962,
framerate: 30,
filesize: 95885044,
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-KuVjSRIN.mp4',
type: 'video/mp4',
width: 720,
height: 406,
label: '406p',
bitrate: 502022,
framerate: 30,
filesize: 133726307,
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-RmcetBML.mp4',
type: 'video/mp4',
width: 1280,
height: 720,
label: '720p',
bitrate: 1206296,
framerate: 30,
filesize: 321327129,
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-qZH7V72t.m4a',
type: 'audio/mp4',
width: 320,
height: 180,
label: '180p',
bitrate: 113416,
framerate: null,
filesize: 30211252,
},
{
file: 'https://cdn.jwplayer.com/videos/wlluXCqg-g7qpiU9Y.mp4',
type: 'video/mp4',
width: 1920,
height: 1080,
label: '1080p',
bitrate: 2936173,
framerate: 30,
filesize: 782123206,
},
],
tracks: [
{
file: 'https://cdn.jwplayer.com/strips/wlluXCqg-120.vtt',
kind: 'thumbnails',
},
],
jwpseg: [
'80011079',
'80011080',
'80011081',
'80011082',
'CMTPI-03654CCA',
'CMTPI-03E78741',
'CMTPI-04AC8D43',
'CMTPI-0653140B',
'CMTPI-09062B79',
'CMTPI-0C481B6E',
'CMTPI-0E61D917',
'CMTPI-0F519E26',
'CMTPI-0F8628E7',
'CMTPI-10231370',
'CMTPI-1081A780',
'CMTPI-1125FE17',
'CMTPI-1281660D',
'CMTPI-1446F98C',
'CMTPI-1491B5F7',
'CMTPI-16C2F840',
'CMTPI-1801D437',
'CMTPI-18220805',
'CMTPI-196D4100',
'CMTPI-1BA500B4',
'CMTPI-1C1AF9F6',
'CMTPI-1F0E45F0',
'CMTPI-22F53174',
'CMTPI-252C803E',
'CMTPI-25872F6D',
'CMTPI-2623EBD0',
'CMTPI-26C3D89C',
'CMTPI-290912EC',
'CMTPI-2921FAA9',
'CMTPI-298C1144',
'CMTPI-29BFFEE3',
'CMTPI-2BEB6E32',
'CMTPI-2CB853D8',
'CMTPI-2CCA8B62',
'CMTPI-2DF42E87',
'CMTPI-30023807',
'CMTPI-3212357F',
'CMTPI-323B8BC4',
'CMTPI-32DFB148',
'CMTPI-32EEF776',
'CMTPI-346DDCE9',
'CMTPI-35B05EC0',
'CMTPI-379409FE',
'CMTPI-3A67EB40',
'CMTPI-3C3D93D3',
'CMTPI-3D222CA4',
'CMTPI-3DA3AC71',
'CMTPI-427DB077',
'CMTPI-434208A3',
'CMTPI-43ECA79C',
'CMTPI-456B9861',
'CMTPI-45928D6D',
'CMTPI-4AF72AB1',
'CMTPI-4D1CA54D',
'CMTPI-51202BAF',
'CMTPI-51E0EBA7',
'CMTPI-528032CA',
'CMTPI-53BB7152',
'CMTPI-56CA7E73',
'CMTPI-59A96550',
'CMTPI-59B389C1',
'CMTPI-5A1B5557',
'CMTPI-5B7FCF5F',
'CMTPI-5C08D349',
'CMTPI-5CDA7645',
'CMTPI-5D1B7ADE',
'CMTPI-5E59A0FD',
'CMTPI-5FC5D6BC',
'CMTPI-601C3EF5',
'CMTPI-60F11E76',
'CMTPI-62A5896D',
'CMTPI-66C7395B',
'CMTPI-688AEC9E',
'CMTPI-69471949',
'CMTPI-695D9689',
'CMTPI-697B8462',
'CMTPI-699C95BA',
'CMTPI-6A4B20D0',
'CMTPI-6AB65898',
'CMTPI-6B3B5860',
'CMTPI-6BD69788',
'CMTPI-717A3D56',
'CMTPI-722848A5',
'CMTPI-7263294A',
'CMTPI-726A9CDE',
'CMTPI-72820CEF',
'CMTPI-738E0D14',
'CMTPI-740E0FB8',
'CMTPI-75B26DBB',
'CMTPI-773EE932',
'CMTPI-7771E5AA',
'CMTPI-78B1D591',
'CMTPI-78DEF36A',
'CMTPI-7BD399CC',
'CMTPI-7E7DE2E8',
'CMTPI-8274BD0E',
'CMTPI-850E3A45',
'CMTPI-8515328A',
'CMTPI-85EA7391',
'CMTPI-8689EEBD',
'CMTPI-86E4060E',
'CMTPI-87CDB7F6',
'CMTPI-8942235C',
'CMTPI-8954B346',
'CMTPI-8984210C',
'CMTPI-8A3F12DF',
'CMTPI-8A4B6040',
'CMTPI-8C45148C',
'CMTPI-8F6E8CDB',
'CMTPI-90015D16',
'CMTPI-953B53CA',
'CMTPI-984BCCFF',
'CMTPI-98841B87',
'CMTPI-9934B409',
'CMTPI-996C4193',
'CMTPI-9BE6FFE3',
'CMTPI-9DB4FD07',
'CMTPI-9DC9C7F7',
'CMTPI-A0EE7594',
'CMTPI-A2AC968C',
'CMTPI-A2B4E1D3',
'CMTPI-A39D2810',
'CMTPI-A51B55FC',
'CMTPI-A543FAC7',
'CMTPI-A5E242D5',
'CMTPI-A63B1F25',
'CMTPI-A73E85F2',
'CMTPI-AB6B0B04',
'CMTPI-ACC93090',
'CMTPI-AEB65419',
'CMTPI-AF5240F3',
'CMTPI-B13FBA3C',
'CMTPI-B2BF819D',
'CMTPI-B41FEBF9',
'CMTPI-B4648159',
'CMTPI-B4E56305',
'CMTPI-B6E0D4BC',
'CMTPI-B7D33688',
'CMTPI-B920F2B6',
'CMTPI-BDDD283A',
'CMTPI-BFDC91CF',
'CMTPI-BFE4C812',
'CMTPI-C27CDF74',
'CMTPI-C4784F98',
'CMTPI-C479838D',
'CMTPI-C57F3E04',
'CMTPI-C8A0D75E',
'CMTPI-CD9D886C',
'CMTPI-CEDC9FF7',
'CMTPI-CFA1AA88',
'CMTPI-D0D341EE',
'CMTPI-D26119FF',
'CMTPI-D3D70833',
'CMTPI-D4693974',
'CMTPI-D7793568',
'CMTPI-D974CFF4',
'CMTPI-DC6559FD',
'CMTPI-DDE7D632',
'CMTPI-DE81647C',
'CMTPI-DEC987A5',
'CMTPI-DEF6B208',
'CMTPI-DFE59E8D',
'CMTPI-E042CC1B',
'CMTPI-E1DEAC7D',
'CMTPI-E20BB9F2',
'CMTPI-E2F52345',
'CMTPI-E313B831',
'CMTPI-E4B5E538',
'CMTPI-E4C3137F',
'CMTPI-E6926241',
'CMTPI-E69D53C6',
'CMTPI-EB768A63',
'CMTPI-ED8C20E6',
'CMTPI-F62DEDE0',
'CMTPI-FD4F1CEF',
'CMTPI-FD8DEA72',
'CMTPI-FDF759B9',
'CMTPI-FF80AA3B',
'CMTPI-FFA711C8',
'CMTPI-FFF42BEE',
'JWBRSAFE',
],
}
export function VideoPlayer() {
const jwPlayerRef = useRef<JWPlayer>(null)
const config: JwConfig = {
license:
Platform.OS === 'android'
? process.env.EXPO_PUBLIC_LICENSE_KEY_ANDROID || ''
: process.env.EXPO_PUBLIC_LICENSE_KEY_IOS || '',
autostart: false,
playlist: [playlistItem],
}
return (
<JWPlayer
ref={jwPlayerRef}
style={styles.player}
config={config}
/>
)
}
const styles = StyleSheet.create({
player: {
flex: 1,
borderWidth: 1,
borderColor: 'green',
},
})Steps to reproduce the behavior:
- Provide thorough
- And complete
- Steps for reproduction
- That are reliably reproducible
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.
System:
OS: macOS 14.5
CPU: (11) arm64 Apple M3 Pro
Memory: 105.52 MB / 36.00 GB
Shell:
version: "5.9"
path: /bin/zsh
Binaries:
Node:
version: 20.11.1
path: ~/.nvm/versions/node/v20.11.1/bin/node
Yarn:
version: 1.22.21
path: ~/.nvm/versions/node/v20.11.1/bin/yarn
npm:
version: 10.2.4
path: ~/.nvm/versions/node/v20.11.1/bin/npm
Watchman: Not Found
Managers:
CocoaPods:
version: 1.15.2
path: /Users/dominic.tobias/.rbenv/shims/pod
SDKs:
iOS SDK:
Platforms:
- DriverKit 23.4
- iOS 17.4
- macOS 14.4
- tvOS 17.4
- visionOS 1.1
- watchOS 10.4
Android SDK:
API Levels:
- "34"
Build Tools:
- 33.0.1
- 34.0.0
- 35.0.0
System Images:
- android-34 | Google APIs ARM 64 v8a
- android-34 | Google Play ARM 64 v8a
Android NDK: 22.1.7171670
IDEs:
Android Studio: 2023.2 AI-232.10227.8.2321.11479570
Xcode:
version: 15.3/15E204a
path: /usr/bin/xcodebuild
Languages:
Java:
version: 17.0.4.1
path: /Users/dominic.tobias/.sdkman/candidates/java/current/bin/javac
Ruby:
version: 3.3.0
path: /Users/dominic.tobias/.rbenv/shims/ruby
npmPackages:
"@react-native-community/cli": Not Found
react: Not Found
react-native: Not Found
react-native-macos: Not Found
npmGlobalPackages:
"*react-native*": Not Found
Android:
hermesEnabled: true
newArchEnabled: false
iOS:
hermesEnabled: true
newArchEnabled: false
Device(s) affected
- Device: iPhone 15 Pro + Android Pixel 7
- OS: iOS 17 + Android API 34
- Expo 51
- React 0.74.1
Additional context
Add any other context about the problem here.
dominictobias commented
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',
},
})