Compare commits

...
6 Commits
14 changed files with 202 additions and 177 deletions
+1 -1
View File
@@ -151,7 +151,7 @@ dependencies {
implementation("androidx.media3:media3-exoplayer-hls:1.10.0")
implementation("androidx.media3:media3-cast:1.10.0")
implementation("com.google.android.gms:play-services-cast-framework:21.5.0")
implementation("com.google.android.gms:play-services-cast-framework:22.3.1")
implementation("androidx.mediarouter:mediarouter:1.7.0")
}
@@ -13,6 +13,7 @@ class OmniCastOptionsProvider : OptionsProvider {
return CastOptions.Builder()
.setReceiverApplicationId(appId)
.setShowSystemOutputSwitcherOnCastIconClick(true)
.build()
}
@@ -56,6 +56,10 @@ class OmniCastTrackSelector : CastTrackSelector() {
indices.forEach { selections.remove(groups[it]) }
if (disabled) return
val overrides = request.trackSelectionParameters.overrides
val overrideMatch = indices.firstOrNull { i ->
overrides.keys.any { it.id == groups[i].id }
}
val match = indices.firstOrNull { i ->
val name: String? = tracks[i].name
val language: String? = tracks[i].language
@@ -64,6 +68,7 @@ class OmniCastTrackSelector : CastTrackSelector() {
Util.normalizeLanguageCode(language) in languages)
}
val chosen = when {
overrideMatch != null -> overrideMatch
match != null -> match
previous.isNotEmpty() -> previous.first()
selectDefault -> indices.first()
@@ -43,8 +43,14 @@ class OmniMediaItemConverter : MediaItemConverter {
val meta = mediaItem.mediaMetadata
val castMetadata = CastMediaMetadata(CastMediaMetadata.MEDIA_TYPE_MOVIE).apply {
meta.title?.let { putString(CastMediaMetadata.KEY_TITLE, it.toString()) }
meta.artist?.let { putString(CastMediaMetadata.KEY_ARTIST, it.toString()) }
meta.albumTitle?.let { putString(CastMediaMetadata.KEY_ALBUM_TITLE, it.toString()) }
meta.artist?.let {
putString(CastMediaMetadata.KEY_ARTIST, it.toString())
putString(CastMediaMetadata.KEY_SUBTITLE, it.toString())
}
meta.albumTitle?.let {
putString(CastMediaMetadata.KEY_ALBUM_TITLE, it.toString())
putString(CastMediaMetadata.KEY_STUDIO, it.toString())
}
meta.artworkUri?.let { addImage(WebImage(it)) }
}
@@ -57,7 +63,8 @@ class OmniMediaItemConverter : MediaItemConverter {
}
val tracks = local.subtitleConfigurations.mapIndexed { index, subtitle ->
MediaTrack.Builder(index.toLong(), MediaTrack.TYPE_TEXT)
// caf tracks are 1 based instead of 0 based. videojs does the same
MediaTrack.Builder((index + 1).toLong(), MediaTrack.TYPE_TEXT)
.setSubtype(MediaTrack.SUBTYPE_SUBTITLES)
.setContentId(subtitle.uri.toString())
.setContentType(subtitle.mimeType ?: "text/vtt")
@@ -37,6 +37,7 @@ import androidx.media3.session.DefaultMediaNotificationProvider
import androidx.media3.session.MediaSession
import androidx.media3.session.MediaSessionService
import androidx.mediarouter.app.MediaRouteChooserDialog
import androidx.mediarouter.app.SystemOutputSwitcherDialogController
import com.google.android.gms.cast.framework.CastContext
import com.google.android.gms.cast.framework.CastState
import com.google.android.gms.cast.framework.CastStateListener
@@ -105,25 +106,41 @@ class OmniPlayer(
override var showNotification: Boolean? = false
set(value) {
if (value == true) {
field = value
syncNotificationService()
}
private var serviceRunning = false
private fun syncNotificationService() {
val shouldShow = showNotification == true && source != null
when {
shouldShow && !serviceRunning -> {
val otherIsPlaying = notificationPlayer?.let { other ->
runOnMainThreadSync { other.isPlaying }
other !== localPlayer && runOnMainThreadSync { other.isPlaying }
} == true
if (otherIsPlaying) {
throw Error("Two players can't display notifications at the same time.")
}
notificationPlayer = localPlayer
ctx.startForegroundService(Intent(ctx, OmniPlayerService::class.java))
} else if (field == true && notificationPlayer == localPlayer) {
serviceRunning = true
}
!shouldShow && serviceRunning -> {
ctx.stopService(Intent(ctx, OmniPlayerService::class.java))
notificationPlayer = null
if (notificationPlayer == localPlayer) notificationPlayer = null
serviceRunning = false
}
field = value
}
}
override val castStatus: CastStatus
get() = runOnMainThreadSync { computeCastStatus() }
val isCasting: Boolean
get() = castContext?.sessionManager?.currentCastSession?.isConnected == true
private fun computeCastStatus(): CastStatus {
val cc = castContext ?: return CastStatus.UNSUPPORTED
return when (cc.castState) {
@@ -144,6 +161,9 @@ class OmniPlayer(
return@runOnMainThread
}
val activity = ctx.currentActivity ?: return@runOnMainThread
if (SystemOutputSwitcherDialogController.showDialog(activity)) {
return@runOnMainThread
}
val selector = cc.mergedSelector ?: return@runOnMainThread
MediaRouteChooserDialog(activity).apply { routeSelector = selector }.show()
}
@@ -288,9 +308,9 @@ class OmniPlayer(
field = value
if (value == null) {
runOnMainThreadSync {
player.setMediaItem(MediaItem.EMPTY)
player.prepare()
player.clearMediaItems()
}
syncNotificationService()
return
}
val handleAudioFocus =
@@ -323,6 +343,7 @@ class OmniPlayer(
player.setMediaItems(mediaItems, startIndex, startPositionMs.toLong())
player.prepare()
}
syncNotificationService()
}
override fun play() {
@@ -358,55 +379,35 @@ class OmniPlayer(
}
}
override fun selectAudio(audio: Track) {
runOnMainThreadSync {
player.trackSelectionParameters = player.trackSelectionParameters
.buildUpon()
.setPreferredAudioLanguage(audio.language)
.setPreferredAudioLabels(*(audio.label?.let { arrayOf(it) } ?: emptyArray()))
.build()
}
}
override fun selectAudio(audio: Track) = selectTrack(C.TRACK_TYPE_AUDIO, audio)
override fun selectSubtitle(subtitle: Track?) {
// Custom (ASS/PGS) subtitles can't be rendered by the cast receiver's
// native pipeline, so while casting they are forwarded over omni's
// message channel (the receiver draws them as an overlay). This mirrors
// the web behavior.
val custom = subtitle?.let { track ->
source?.subtitles?.firstOrNull { it.id == track.id }?.let { sub ->
val mime = sub.mimeType?.lowercase() ?: ""
val ext = sub.link.substringBefore('?').substringBefore('#')
.substringAfterLast('.', "").lowercase()
mime.contains("ass") || mime.contains("ssa") || mime.contains("pgs") ||
ext == "ass" || ext == "ssa" || ext == "sup"
}
} ?: false
override fun selectSubtitle(subtitle: Track?) = selectTrack(C.TRACK_TYPE_TEXT, subtitle)
private fun selectTrack(type: Int, track: Track?) {
runOnMainThreadSync {
val session = castContext?.sessionManager?.currentCastSession
val casting = session?.isConnected == true
if (subtitle == null || (custom && casting)) {
player.trackSelectionParameters = player.trackSelectionParameters
.buildUpon()
.setTrackTypeDisabled(C.TRACK_TYPE_TEXT, true)
.build()
val params = player.trackSelectionParameters.buildUpon()
.clearOverridesOfType(type)
if (track == null) {
params.setTrackTypeDisabled(type, true)
} else {
player.trackSelectionParameters = player.trackSelectionParameters
.buildUpon()
.setTrackTypeDisabled(C.TRACK_TYPE_TEXT, false)
.setPreferredTextLanguage(subtitle.language)
.setPreferredTextLabels(*(subtitle.label?.let { arrayOf(it) } ?: emptyArray()))
.build()
}
if (casting) {
val id = if (custom) subtitle?.id else null
val payload = JSONObject().apply { put("subtitle", id ?: JSONObject.NULL) }
try {
session?.sendMessage(CAST_MESSAGE_NAMESPACE, payload.toString())
} catch (_: Throwable) {
// best effort; receiver may not support the namespace.
params.setTrackTypeDisabled(type, false)
val group = player.currentTracks.groups.firstOrNull {
it.type == type && it.mediaTrackGroup.id == track.id
}?.mediaTrackGroup
if (group != null) {
params.setOverrideForType(TrackSelectionOverride(group, 0))
} else {
val labels = track.label?.let { arrayOf(it) } ?: emptyArray()
if (type == C.TRACK_TYPE_AUDIO) {
params.setPreferredAudioLanguage(track.language)
.setPreferredAudioLabels(*labels)
} else {
params.setPreferredTextLanguage(track.language)
.setPreferredTextLabels(*labels)
}
}
}
player.trackSelectionParameters = params.build()
}
}
@@ -414,18 +415,30 @@ class OmniPlayer(
val groups = player.currentTracks.groups.filter { it.type == trackType }
if (groups.isEmpty()) return emptyArray()
return groups.map {
it.getTrackFormat(0).run {
Track(
id = it.mediaTrackGroup.id,
label = this.label,
language = this.language,
selected = it.isSelected
)
}
// when casting tracks are stripped of some metadata, recover it
val castTracks = castMediaTracksById()
return groups.map { group ->
val format = group.getTrackFormat(0)
val castTrackId = group.mediaTrackGroup.id.substringAfterLast("track=", "").toLongOrNull()
val cast = castTracks[castTrackId]
Track(
id = group.mediaTrackGroup.id,
label = cast?.name ?: format.label,
language = cast?.language ?: format.language,
selected = group.isSelected
)
}.toTypedArray()
}
private fun castMediaTracksById(): Map<Long, com.google.android.gms.cast.MediaTrack> {
if (!isCasting) return emptyMap()
val tracks = castContext?.sessionManager?.currentCastSession
?.remoteMediaClient?.mediaInfo?.mediaTracks ?: return emptyMap()
return tracks.associateBy { it.id }
}
private fun getRenditions(): Array<Rendition> {
val group =
player.currentTracks.groups.firstOrNull { it.isSelected && it.type == C.TRACK_TYPE_VIDEO }
@@ -489,10 +502,6 @@ class OmniPlayer(
companion object {
var notificationPlayer: Player? = null
// Cast custom-message channel (shared with the web receiver) used to
// forward overlay (ASS/PGS) subtitle selection to the receiver.
const val CAST_MESSAGE_NAMESPACE = "urn:x-cast:dev.zoriya.omni"
// MediaItem RequestMetadata extras keys carrying cast-only data.
const val CAST_ID_EXTRA = "dev.zoriya.omni.castId"
const val CAST_DATA_EXTRA = "dev.zoriya.omni.castData"
@@ -510,7 +519,13 @@ class OmniPlayerService : MediaSessionService() {
override fun onCreate() {
super.onCreate()
player = OmniPlayer.notificationPlayer ?: throw Error("No player available")
val available = OmniPlayer.notificationPlayer
if (available == null) {
startForeground(1, createImmediateNotification())
stopSelf()
return
}
player = available
val launchIntent = packageManager.getLaunchIntentForPackage(packageName)?.apply {
addFlags(Intent.FLAG_ACTIVITY_SINGLE_TOP)
}
@@ -546,7 +561,8 @@ class OmniPlayerService : MediaSessionService() {
player = current
mediaSession.player = current
}
return super.onStartCommand(intent, flags, startId)
super.onStartCommand(intent, flags, startId)
return START_NOT_STICKY
}
private fun createImmediateNotification(): Notification {
@@ -587,7 +603,7 @@ class OmniPlayerService : MediaSessionService() {
}
override fun onDestroy() {
mediaSession.release()
if (::mediaSession.isInitialized) mediaSession.release()
super.onDestroy()
}
}
@@ -185,7 +185,10 @@ class OmniView(val context: ThemedReactContext) :
return
}
if (boundPlayer == null || boundPlayer?.localPlayer?.isPlaying != true) {
if (boundPlayer == null ||
boundPlayer?.localPlayer?.isPlaying != true ||
boundPlayer?.isCasting == true
) {
return
}
@@ -219,7 +222,8 @@ class OmniView(val context: ThemedReactContext) :
val autoEnterEnabled =
Build.VERSION.SDK_INT >= Build.VERSION_CODES.S &&
autoPip == true &&
boundPlayer?.localPlayer?.isPlaying == true
boundPlayer?.localPlayer?.isPlaying == true &&
boundPlayer?.isCasting != true
activity.setPictureInPictureParams(buildPipParams(autoEnterEnabled))
}
@@ -689,25 +689,27 @@ class VlcPlayer(ctx: Context) :
}
override fun getCurrentTimeline(): Timeline {
if (mediaItems.isEmpty()) return Timeline.EMPTY
// snapshot the current playlist for the returned timeline.
// timelines are immutable
val items = mediaItems
val currentIndex = currentMediaItemIndex
val currentDurationUs = duration.takeIf { it != TIME_UNSET }?.let { it * 1000L } ?: TIME_UNSET
if (items.isEmpty()) return Timeline.EMPTY
return object : Timeline() {
private fun durationUsForIndex(index: Int): Long {
if (index != currentMediaItemIndex) return TIME_UNSET
val dur = duration
return if (dur == TIME_UNSET) TIME_UNSET else dur * 1000L
}
private fun durationUsForIndex(index: Int): Long =
if (index == currentIndex) currentDurationUs else TIME_UNSET
override fun getWindowCount(): Int = mediaItems.size
override fun getWindowCount(): Int = items.size
override fun getWindow(
windowIndex: Int,
window: Window,
defaultPositionProjectionUs: Long
): Window {
check(windowIndex in mediaItems.indices)
val index = windowIndex.coerceIn(items.indices)
return window.set(
windowIndex,
mediaItems[windowIndex],
index,
items[index],
null,
TIME_UNSET,
TIME_UNSET,
@@ -716,34 +718,33 @@ class VlcPlayer(ctx: Context) :
false,
null,
0L,
durationUsForIndex(windowIndex),
0,
mediaItems.size - 1,
durationUsForIndex(index),
index,
index,
0L
)
}
override fun getPeriodCount(): Int = mediaItems.size
override fun getPeriodCount(): Int = items.size
override fun getPeriod(periodIndex: Int, period: Period, setIds: Boolean): Period {
check(periodIndex in mediaItems.indices)
return period.set(periodIndex, periodIndex, 0, durationUsForIndex(periodIndex), 0L)
val index = periodIndex.coerceIn(items.indices)
return period.set(index, index, index, durationUsForIndex(index), 0L)
}
override fun getIndexOfPeriod(uid: Any): Int {
return if (uid is Int && uid in mediaItems.indices) uid else INDEX_UNSET
return if (uid is Int && uid in items.indices) uid else INDEX_UNSET
}
override fun getUidOfPeriod(periodIndex: Int): Any {
check(periodIndex in mediaItems.indices)
return periodIndex
return periodIndex.coerceIn(items.indices)
}
}
}
override fun getCurrentPeriodIndex() = currentMediaItemIndex
override fun getCurrentPeriodIndex() = currentMediaItemIndex.coerceAtLeast(0)
override fun getCurrentMediaItemIndex() = currentMediaItemIndex
override fun getCurrentMediaItemIndex() = currentMediaItemIndex.coerceAtLeast(0)
override fun getDuration(): Long = player.length.takeIf { it > 0 } ?: TIME_UNSET
+33 -7
View File
@@ -1,5 +1,5 @@
import type React from "react";
import { useCallback, useEffect, useMemo, useState } from "react";
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
import { Pressable, ScrollView, StyleSheet, Text, View } from "react-native";
import {
type AndroidBackend,
@@ -57,12 +57,16 @@ function PlayerExample({
trackLabel,
backend,
onSwitchBackend,
hasSource,
onLoad,
}: {
onPrev: () => void;
onNext: () => void;
trackLabel: string;
backend: AndroidBackend;
onSwitchBackend: (backend: AndroidBackend) => void;
hasSource: boolean;
onLoad: () => void;
}): React.JSX.Element {
const player = usePlayer();
const status = usePlayerState("status");
@@ -75,7 +79,8 @@ function PlayerExample({
const volume = usePlayerState("volume");
const isAutoQuality = usePlayerState("isAutoQuality");
const castStatus = usePlayerState("castStatus");
const [logs, setLogs] = useState<string[]>([]);
const [logs, setLogs] = useState<{ id: number; message: string }[]>([]);
const logId = useRef(0);
const [tracks, setTracks] = useState(() => ({
videos: [...player.videos],
audios: [...player.audios],
@@ -98,7 +103,7 @@ function PlayerExample({
const pushLog = useCallback((message: string) => {
setLogs((prev) => {
const next = [message, ...prev];
const next = [{ id: logId.current++, message }, ...prev];
return next.slice(0, 8);
});
}, []);
@@ -232,7 +237,20 @@ function PlayerExample({
return (
<ScrollView style={styles.container}>
<Text style={styles.heading}>react-native-omni</Text>
<Text style={styles.subheading}>{trackLabel}</Text>
<Text style={styles.subheading}>
{hasSource ? trackLabel : "No media loaded"}
</Text>
<View style={styles.row}>
<Pressable
style={[styles.button, hasSource && styles.selectedTrackButton]}
onPress={onLoad}
>
<Text style={styles.buttonText}>
{hasSource ? "Unload media" : "Load media"}
</Text>
</Pressable>
</View>
<View style={styles.row}>
<Pressable
@@ -484,8 +502,8 @@ function PlayerExample({
<Text style={styles.logText}>Event log will appear here.</Text>
) : (
logs.map((entry) => (
<Text key={`${entry}`} style={styles.logText}>
{entry}
<Text key={entry.id} style={styles.logText}>
{entry.message}
</Text>
))
)}
@@ -496,6 +514,9 @@ function PlayerExample({
function App(): React.JSX.Element {
const [currentIndex, setCurrentIndex] = useState(0);
// Start with no media loaded so we can verify the app boots (and the media
// notification stays hidden) before any source is set.
const [hasSource, setHasSource] = useState(false);
const [backend, setBackend] = useState<AndroidBackend>("vlc");
const [pendingBackend, setPendingBackend] = useState<AndroidBackend | null>(
null,
@@ -536,6 +557,8 @@ function App(): React.JSX.Element {
{
id: "kusu",
link: "https://jassub.pages.dev/subtitles/Kusriya%20S2%20OP1v3.ass",
label: "ass test",
language: "jp",
},
{
id: "pgs",
@@ -571,8 +594,9 @@ function App(): React.JSX.Element {
return (
<OmniProvider
key={backend}
source={source}
source={hasSource ? source : undefined}
backend={{ android: backend }}
cast={{receiverApplicationId: "D8FB0FC1"}}
showNotification
>
<PlayerExample
@@ -581,6 +605,8 @@ function App(): React.JSX.Element {
trackLabel={PLAYLIST[currentIndex].title}
backend={backend}
onSwitchBackend={handleSwitchBackend}
hasSource={hasSource}
onLoad={() => setHasSource((v) => !v)}
/>
</OmniProvider>
);
@@ -28,5 +28,8 @@
<meta-data
android:name="com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME"
android:value="dev.zoriya.omni.OmniCastOptionsProvider" />
<receiver
android:name="androidx.mediarouter.media.MediaTransferReceiver"
android:exported="true" />
</application>
</manifest>
+17
View File
@@ -7,6 +7,8 @@ import {
const OPTIONS_PROVIDER_NAME =
"com.google.android.gms.cast.framework.OPTIONS_PROVIDER_CLASS_NAME";
const OPTIONS_PROVIDER_VALUE = "dev.zoriya.omni.OmniCastOptionsProvider";
const MEDIA_TRANSFER_RECEIVER_NAME =
"androidx.mediarouter.media.MediaTransferReceiver";
function patchManifestForCast(
androidManifest: AndroidConfig.Manifest.AndroidManifest,
@@ -36,6 +38,21 @@ function patchManifestForCast(
}
mainApplication["meta-data"] = metaData;
const receivers = mainApplication.receiver ?? [];
if (
!receivers.some(
(item) => item.$["android:name"] === MEDIA_TRANSFER_RECEIVER_NAME,
)
) {
receivers.push({
$: {
"android:name": MEDIA_TRANSFER_RECEIVER_NAME,
"android:exported": "true",
},
});
}
mainApplication.receiver = receivers;
return androidManifest;
}
-3
View File
@@ -127,9 +127,6 @@ export const useEvent = <Event extends keyof OmniEvents>(
return undefined;
}, [event, player]);
// ASS/PGS (overlay) subtitle selection is not a videojs text-track change, so
// re-fire subtitleChange when the overlay subtitle changes too — consumers
// only need useEvent("subtitleChange").
useEffect(() => {
if (event !== "subtitleChange") return;
return player.subscribeOverlaySubtitle(() => {
+10 -26
View File
@@ -217,47 +217,31 @@ export class WebOmniPlayer implements OmniPlayer {
get subtitles(): Track[] {
const textTracks = selectTextTrack(this._store.state)?.textTrackList ?? [];
const native = textTracks
return textTracks
.filter((x) => x.kind === "subtitles" || x.kind === "captions")
.map((track) => ({
id: track.id!,
label: track.label,
language: track.language,
selected: track.mode === "showing",
selected:
track.mode === "showing" || this.overlaySubtitle?.id === track.id,
}));
const overlay = this.overlaySubtitles.map((sub) => ({
id: sub.id,
label: sub.label,
language: sub.language,
selected: this.overlaySubtitle?.id === sub.id,
}));
return [...native, ...overlay];
}
selectSubtitle(subtitle?: Track): void {
const tracks = selectTextTrack(this._store.state);
const overlay = subtitle
? this.overlaySubtitles.find((s) => s.id === subtitle.id)
: undefined;
const tracks = selectTextTrack(this._store.state);
if (this.castStatus === "connected") {
tracks?.selectSubtitlesTrack(subtitle ? subtitle.id : "off");
this.setOverlaySubtitle(null);
return;
}
tracks?.selectSubtitlesTrack(overlay || !subtitle ? "off" : subtitle.id);
this.setOverlaySubtitle(overlay ?? null);
if (this.castStatus === "connected") {
window.cast.framework.CastContext.getInstance()
.getCurrentSession()
?.sendMessage("urn:x-cast:dev.zoriya.omni", {
subtitle: overlay?.id ?? null,
})
.catch(() => {});
}
}
// To be used on a callback of a chromecast session, it only changes the local state
applyRemoteSubtitle(id: string | null): void {
this.setOverlaySubtitle(
id ? (this.overlaySubtitles.find((s) => s.id === id) ?? null) : null,
);
}
private setOverlaySubtitle(sub: Subtitle | null): void {
-30
View File
@@ -75,36 +75,6 @@ const PlayerInitializer = ({
player.showNotification = showNotification;
}, [showNotification]);
useEffect(() => {
let media: chrome.cast.media.Media | null = null;
const onMediaUpdate = () => {
const data = media?.customData as { subtitle?: unknown } | undefined;
player.applyRemoteSubtitle(
typeof data?.subtitle === "string" ? data.subtitle : null,
);
};
const syncMedia = () => {
const next =
window.cast.framework.CastContext.getInstance()
.getCurrentSession()
?.getMediaSession() ?? null;
if (next === media) return;
media?.removeUpdateListener(onMediaUpdate);
media = next;
media?.addUpdateListener(onMediaUpdate);
onMediaUpdate();
};
const unsubscribe = store.subscribe(syncMedia);
syncMedia();
return () => {
unsubscribe();
media?.removeUpdateListener(onMediaUpdate);
};
}, [store]);
return <PlayerCtx.Provider value={player}>{children}</PlayerCtx.Provider>;
};
+11 -17
View File
@@ -10,11 +10,7 @@ import {
useSyncExternalStore,
} from "react";
import { usePlayerState } from "./events";
import {
getSubtitleFormat,
isCustomSubtitle,
type WebOmniPlayer,
} from "./player.web";
import { getSubtitleFormat, type WebOmniPlayer } from "./player.web";
import { usePlayer, VideoPlayer } from "./provider.web";
import type { SubtitleAssets } from "./types/subtitles";
import type { OmniViewProps } from "./types/view";
@@ -165,18 +161,16 @@ export const OmniView = ({
crossOrigin="anonymous"
style={{ width: "100%", height: "100%", objectFit: "contain" }}
>
{(player.source?.subtitles ?? [])
.filter((subtitle) => !isCustomSubtitle(subtitle))
.map((subtitle) => (
<track
key={subtitle.id}
id={subtitle.id}
kind="subtitles"
src={subtitle.link}
srcLang={subtitle.language}
label={subtitle.label ?? subtitle.language ?? subtitle.id}
/>
))}
{(player.source?.subtitles ?? []).map((subtitle) => (
<track
key={subtitle.id}
id={subtitle.id}
kind="subtitles"
src={subtitle.link}
srcLang={subtitle.language}
label={subtitle.label ?? subtitle.language ?? subtitle.id}
/>
))}
</Tech>
)}
{castStatus !== "connected" && castStatus !== "connecting" && (