@mottosports/motto-video-player 1.0.1-rc.25 → 1.0.1-rc.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/index.d.mts +70 -79
- package/dist/index.d.ts +70 -79
- package/dist/index.js +89 -109
- package/dist/index.js.map +1 -1
- package/dist/index.mjs +89 -109
- package/dist/index.mjs.map +1 -1
- package/package.json +1 -1
package/dist/index.mjs
CHANGED
|
@@ -1109,6 +1109,32 @@ import shaka3 from "shaka-player/dist/shaka-player.ui";
|
|
|
1109
1109
|
// src/hooks/useShakePlayer.ts
|
|
1110
1110
|
import { useRef, useCallback } from "react";
|
|
1111
1111
|
import shaka from "shaka-player/dist/shaka-player.ui";
|
|
1112
|
+
|
|
1113
|
+
// src/utils/devices.ts
|
|
1114
|
+
var isAppleDevice = () => {
|
|
1115
|
+
if (typeof navigator === "undefined") return false;
|
|
1116
|
+
const ua = navigator.userAgent || "";
|
|
1117
|
+
const isIOS = /iPad|iPhone|iPod/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
|
|
1118
|
+
const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|Edg/.test(ua);
|
|
1119
|
+
const isMacSafari = /Macintosh/.test(ua) && isSafari;
|
|
1120
|
+
return isIOS || isMacSafari;
|
|
1121
|
+
};
|
|
1122
|
+
var isPlayReadySupported = () => {
|
|
1123
|
+
if (typeof navigator === "undefined" || typeof window === "undefined") {
|
|
1124
|
+
return false;
|
|
1125
|
+
}
|
|
1126
|
+
if (!navigator.requestMediaKeySystemAccess) {
|
|
1127
|
+
return false;
|
|
1128
|
+
}
|
|
1129
|
+
const userAgent = navigator.userAgent || "";
|
|
1130
|
+
const isWindows = /Windows/.test(userAgent);
|
|
1131
|
+
const isXbox = /Xbox/.test(userAgent);
|
|
1132
|
+
const isEdge = /Edg/.test(userAgent);
|
|
1133
|
+
const isIE = /Trident|MSIE/.test(userAgent);
|
|
1134
|
+
return isWindows || isXbox || isEdge || isIE;
|
|
1135
|
+
};
|
|
1136
|
+
|
|
1137
|
+
// src/hooks/useShakePlayer.ts
|
|
1112
1138
|
var useShakePlayer = ({
|
|
1113
1139
|
src,
|
|
1114
1140
|
shakaConfig,
|
|
@@ -1129,69 +1155,7 @@ var useShakePlayer = ({
|
|
|
1129
1155
|
if (shakaConfig) {
|
|
1130
1156
|
player.configure(shakaConfig);
|
|
1131
1157
|
}
|
|
1132
|
-
|
|
1133
|
-
const manifestUrl = isPlaylistObject ? src.url : src;
|
|
1134
|
-
const drmData = isPlaylistObject ? src.drm : null;
|
|
1135
|
-
if (drmData && drmData.token) {
|
|
1136
|
-
const isAppleDevice2 = () => {
|
|
1137
|
-
if (typeof navigator === "undefined") return false;
|
|
1138
|
-
const ua = navigator.userAgent || "";
|
|
1139
|
-
const isIOS = /iPad|iPhone|iPod/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
|
|
1140
|
-
const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|Edg/.test(ua);
|
|
1141
|
-
const isMacSafari = /Macintosh/.test(ua) && isSafari;
|
|
1142
|
-
return isIOS || isMacSafari;
|
|
1143
|
-
};
|
|
1144
|
-
const useFairPlay = isAppleDevice2();
|
|
1145
|
-
const drmConfig2 = {
|
|
1146
|
-
servers: {},
|
|
1147
|
-
advanced: {}
|
|
1148
|
-
};
|
|
1149
|
-
if (useFairPlay && drmData.fairplay?.license_url) {
|
|
1150
|
-
drmConfig2.servers["com.apple.fps"] = drmData.fairplay.license_url;
|
|
1151
|
-
} else if (drmData.widevine?.license_url) {
|
|
1152
|
-
drmConfig2.servers["com.widevine.alpha"] = drmData.widevine.license_url;
|
|
1153
|
-
}
|
|
1154
|
-
if (useFairPlay && drmData.fairplay?.certificate_url) {
|
|
1155
|
-
try {
|
|
1156
|
-
const req = await fetch(drmData.fairplay.certificate_url);
|
|
1157
|
-
const cert = await req.arrayBuffer();
|
|
1158
|
-
drmConfig2.advanced["com.apple.fps"] = {
|
|
1159
|
-
serverCertificate: new Uint8Array(cert)
|
|
1160
|
-
};
|
|
1161
|
-
} catch (e) {
|
|
1162
|
-
console.warn("Failed to fetch FairPlay certificate:", e);
|
|
1163
|
-
}
|
|
1164
|
-
}
|
|
1165
|
-
if (Object.keys(drmConfig2.servers).length > 0) {
|
|
1166
|
-
player.configure({ drm: drmConfig2 });
|
|
1167
|
-
}
|
|
1168
|
-
const netEngine = player.getNetworkingEngine();
|
|
1169
|
-
if (netEngine) {
|
|
1170
|
-
netEngine.registerRequestFilter((type, request) => {
|
|
1171
|
-
if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
|
|
1172
|
-
request.headers["x-dt-custom-data"] = drmData.token;
|
|
1173
|
-
}
|
|
1174
|
-
});
|
|
1175
|
-
netEngine.registerResponseFilter((type, response) => {
|
|
1176
|
-
if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
|
|
1177
|
-
const ks = player.keySystem && player.keySystem();
|
|
1178
|
-
if (ks === "com.apple.fps") {
|
|
1179
|
-
const responseText = shaka.util.StringUtils.fromUTF8(response.data);
|
|
1180
|
-
response.data = shaka.util.Uint8ArrayUtils.fromBase64(responseText).buffer;
|
|
1181
|
-
}
|
|
1182
|
-
}
|
|
1183
|
-
});
|
|
1184
|
-
}
|
|
1185
|
-
}
|
|
1186
|
-
if (drmConfig) {
|
|
1187
|
-
if (drmConfig.clearKeys) {
|
|
1188
|
-
player.configure({ "drm.clearKeys": drmConfig.clearKeys });
|
|
1189
|
-
}
|
|
1190
|
-
if (drmConfig.servers) {
|
|
1191
|
-
player.configure({ "drm.servers": drmConfig.servers });
|
|
1192
|
-
}
|
|
1193
|
-
}
|
|
1194
|
-
player.addEventListener("error", (event) => {
|
|
1158
|
+
player?.addEventListener("error", (event) => {
|
|
1195
1159
|
const error = event.detail;
|
|
1196
1160
|
if (error?.code === 7e3) {
|
|
1197
1161
|
return;
|
|
@@ -1199,7 +1163,6 @@ var useShakePlayer = ({
|
|
|
1199
1163
|
console.error("Shaka Player Error:", error);
|
|
1200
1164
|
onError?.(new Error(`Shaka Player Error: ${error.message || "Unknown error"}`));
|
|
1201
1165
|
});
|
|
1202
|
-
await player.load(manifestUrl);
|
|
1203
1166
|
onPlayerReady?.(player);
|
|
1204
1167
|
return player;
|
|
1205
1168
|
} catch (error) {
|
|
@@ -1211,6 +1174,60 @@ var useShakePlayer = ({
|
|
|
1211
1174
|
throw error;
|
|
1212
1175
|
}
|
|
1213
1176
|
}, [shakaConfig, drmConfig, src, onError, onPlayerReady]);
|
|
1177
|
+
const loadSource = useCallback(async () => {
|
|
1178
|
+
const player = playerRef.current;
|
|
1179
|
+
if (!player) return;
|
|
1180
|
+
let manifestUrl = src.url;
|
|
1181
|
+
const isDRM = Boolean(src.drm);
|
|
1182
|
+
let cert = null;
|
|
1183
|
+
if (isDRM) {
|
|
1184
|
+
const isPlayReady = isPlayReadySupported();
|
|
1185
|
+
const isFairPlay = isAppleDevice();
|
|
1186
|
+
if (isFairPlay && src.drm.fairplay?.certificate_url) {
|
|
1187
|
+
const req = await fetch(src.drm.fairplay.certificate_url);
|
|
1188
|
+
cert = await req.arrayBuffer();
|
|
1189
|
+
manifestUrl = src.drm.fairplay.playlist_url;
|
|
1190
|
+
} else if (isPlayReady && src.drm.playready?.license_url) {
|
|
1191
|
+
manifestUrl = src.drm.playready.playlist_url;
|
|
1192
|
+
} else {
|
|
1193
|
+
manifestUrl = src.drm?.widevine?.playlist_url || "";
|
|
1194
|
+
}
|
|
1195
|
+
player.configure({
|
|
1196
|
+
drm: {
|
|
1197
|
+
servers: {
|
|
1198
|
+
"com.widevine.alpha": src.drm.widevine?.license_url,
|
|
1199
|
+
"com.microsoft.playready": src.drm.playready?.license_url,
|
|
1200
|
+
"com.apple.fps": src.drm.fairplay?.license_url
|
|
1201
|
+
},
|
|
1202
|
+
...cert && {
|
|
1203
|
+
advanced: {
|
|
1204
|
+
"com.apple.fps": {
|
|
1205
|
+
serverCertificate: new Uint8Array(cert)
|
|
1206
|
+
}
|
|
1207
|
+
}
|
|
1208
|
+
}
|
|
1209
|
+
}
|
|
1210
|
+
});
|
|
1211
|
+
const netEngine = player.getNetworkingEngine();
|
|
1212
|
+
if (netEngine) {
|
|
1213
|
+
netEngine.registerRequestFilter((type, request) => {
|
|
1214
|
+
if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
|
|
1215
|
+
request.headers["x-dt-custom-data"] = src.drm.token;
|
|
1216
|
+
}
|
|
1217
|
+
});
|
|
1218
|
+
netEngine.registerResponseFilter((type, response) => {
|
|
1219
|
+
if (type === shaka.net.NetworkingEngine.RequestType.LICENSE) {
|
|
1220
|
+
const ks = player.keySystem && player.keySystem();
|
|
1221
|
+
if (ks === "com.apple.fps") {
|
|
1222
|
+
const responseText = shaka.util.StringUtils.fromUTF8(response.data);
|
|
1223
|
+
response.data = shaka.util.Uint8ArrayUtils.fromBase64(responseText).buffer;
|
|
1224
|
+
}
|
|
1225
|
+
}
|
|
1226
|
+
});
|
|
1227
|
+
}
|
|
1228
|
+
}
|
|
1229
|
+
await player.load(manifestUrl);
|
|
1230
|
+
}, [src]);
|
|
1214
1231
|
const destroyPlayer = useCallback(async () => {
|
|
1215
1232
|
if (playerRef.current) {
|
|
1216
1233
|
try {
|
|
@@ -1225,6 +1242,7 @@ var useShakePlayer = ({
|
|
|
1225
1242
|
return {
|
|
1226
1243
|
playerRef,
|
|
1227
1244
|
initializePlayer,
|
|
1245
|
+
loadSource,
|
|
1228
1246
|
destroyPlayer
|
|
1229
1247
|
};
|
|
1230
1248
|
};
|
|
@@ -1349,7 +1367,7 @@ import initShakaPlayerMux from "@mux/mux-data-shakaplayer";
|
|
|
1349
1367
|
import shaka2 from "shaka-player/dist/shaka-player.ui";
|
|
1350
1368
|
|
|
1351
1369
|
// package.json
|
|
1352
|
-
var version = "1.0.1-rc.
|
|
1370
|
+
var version = "1.0.1-rc.27";
|
|
1353
1371
|
|
|
1354
1372
|
// src/hooks/useMuxAnalytics.ts
|
|
1355
1373
|
var useMuxAnalytics = (playerRef, muxConfig, onMuxReady, onMuxDataUpdate) => {
|
|
@@ -3254,7 +3272,7 @@ var Player = forwardRef(
|
|
|
3254
3272
|
const containerRef = useRef8(null);
|
|
3255
3273
|
const adContainerRef = useRef8(null);
|
|
3256
3274
|
useImperativeHandle(ref, () => videoRef.current, []);
|
|
3257
|
-
const { playerRef, initializePlayer, destroyPlayer } = useShakePlayer({
|
|
3275
|
+
const { playerRef, initializePlayer, loadSource, destroyPlayer } = useShakePlayer({
|
|
3258
3276
|
src,
|
|
3259
3277
|
shakaConfig,
|
|
3260
3278
|
drmConfig,
|
|
@@ -3362,11 +3380,12 @@ var Player = forwardRef(
|
|
|
3362
3380
|
const initialize = async () => {
|
|
3363
3381
|
try {
|
|
3364
3382
|
await initializePlayer(video);
|
|
3383
|
+
initializeMux();
|
|
3384
|
+
await loadSource();
|
|
3365
3385
|
setupEventListeners();
|
|
3366
3386
|
const cleanupQuality = setupQualityTracking();
|
|
3367
3387
|
configureQuality();
|
|
3368
3388
|
await initializeUI();
|
|
3369
|
-
initializeMux();
|
|
3370
3389
|
initializeAds();
|
|
3371
3390
|
initializeChromecast();
|
|
3372
3391
|
} catch (error) {
|
|
@@ -4024,7 +4043,7 @@ var Video = ({
|
|
|
4024
4043
|
Player,
|
|
4025
4044
|
{
|
|
4026
4045
|
...props,
|
|
4027
|
-
src:
|
|
4046
|
+
src: activePlaylist,
|
|
4028
4047
|
className: twMerge3("video-player-container", className),
|
|
4029
4048
|
events,
|
|
4030
4049
|
containerClassName: "w-full h-full",
|
|
@@ -4038,14 +4057,6 @@ import { useCallback as useCallback8, useEffect as useEffect8, useState as useSt
|
|
|
4038
4057
|
import { twMerge as twMerge4 } from "tailwind-merge";
|
|
4039
4058
|
import { useQuery as useQuery2 } from "@tanstack/react-query";
|
|
4040
4059
|
import { Fragment, jsx as jsx10, jsxs as jsxs8 } from "react/jsx-runtime";
|
|
4041
|
-
var isAppleDevice = () => {
|
|
4042
|
-
if (typeof navigator === "undefined") return false;
|
|
4043
|
-
const ua = navigator.userAgent || navigator.vendor || "";
|
|
4044
|
-
const isIOS = /iPad|iPhone|iPod/.test(ua) || navigator.platform === "MacIntel" && navigator.maxTouchPoints > 1;
|
|
4045
|
-
const isSafari = /Safari/.test(ua) && !/Chrome|CriOS|FxiOS|Edg/.test(ua);
|
|
4046
|
-
const isMacSafari = /Macintosh/.test(ua) && isSafari;
|
|
4047
|
-
return isIOS || isMacSafari;
|
|
4048
|
-
};
|
|
4049
4060
|
var Event = ({
|
|
4050
4061
|
publicKey,
|
|
4051
4062
|
eventId,
|
|
@@ -4078,7 +4089,6 @@ var Event = ({
|
|
|
4078
4089
|
const [activePlaylist, setActivePlaylist] = useState4();
|
|
4079
4090
|
const [activeVideoId, setActiveVideoId] = useState4();
|
|
4080
4091
|
const videoIds = eventData?.videoIds ?? [];
|
|
4081
|
-
const [isDRM, setIsDRM] = useState4(false);
|
|
4082
4092
|
const {
|
|
4083
4093
|
data: videosData,
|
|
4084
4094
|
isLoading: videosIsLoading,
|
|
@@ -4105,34 +4115,9 @@ var Event = ({
|
|
|
4105
4115
|
for (const video of videosWithPlaylists) {
|
|
4106
4116
|
const hlsPlaylist = findHLSPlaylist(video);
|
|
4107
4117
|
if (hlsPlaylist?.url) {
|
|
4108
|
-
|
|
4109
|
-
const drm = matchedPlaylist?.drm;
|
|
4110
|
-
const hasDrm = Boolean(drm?.token);
|
|
4111
|
-
let selectedPlaylist;
|
|
4112
|
-
if (hasDrm) {
|
|
4113
|
-
const useFairPlay = isAppleDevice();
|
|
4114
|
-
if (useFairPlay && drm?.fairplay?.playlist_url && drm?.fairplay?.license_url) {
|
|
4115
|
-
selectedPlaylist = {
|
|
4116
|
-
url: drm.fairplay.playlist_url,
|
|
4117
|
-
format: matchedPlaylist?.format || "HLS",
|
|
4118
|
-
drm
|
|
4119
|
-
};
|
|
4120
|
-
} else if (drm?.widevine?.playlist_url && drm?.widevine?.license_url) {
|
|
4121
|
-
selectedPlaylist = {
|
|
4122
|
-
url: drm.widevine.playlist_url,
|
|
4123
|
-
format: matchedPlaylist?.format || "HLS",
|
|
4124
|
-
drm
|
|
4125
|
-
};
|
|
4126
|
-
} else {
|
|
4127
|
-
selectedPlaylist = matchedPlaylist;
|
|
4128
|
-
}
|
|
4129
|
-
} else {
|
|
4130
|
-
selectedPlaylist = hlsPlaylist.url;
|
|
4131
|
-
}
|
|
4132
|
-
setActivePlaylist(selectedPlaylist);
|
|
4118
|
+
setActivePlaylist(hlsPlaylist);
|
|
4133
4119
|
setActiveVideoId(video.id);
|
|
4134
4120
|
hlsPlaylistFound = true;
|
|
4135
|
-
setIsDRM(Boolean(hasDrm));
|
|
4136
4121
|
break;
|
|
4137
4122
|
}
|
|
4138
4123
|
}
|
|
@@ -4156,11 +4141,6 @@ var Event = ({
|
|
|
4156
4141
|
events.onEventData(eventData);
|
|
4157
4142
|
}
|
|
4158
4143
|
}, [eventData, events]);
|
|
4159
|
-
useEffect8(() => {
|
|
4160
|
-
if (isDRM) {
|
|
4161
|
-
console.log("DRM is enabled");
|
|
4162
|
-
}
|
|
4163
|
-
}, [isDRM]);
|
|
4164
4144
|
useEffect8(() => {
|
|
4165
4145
|
if (events?.onVideoData && activeVideoId && videosData) {
|
|
4166
4146
|
const activeVideo = videosData.find((video) => video.id === activeVideoId);
|
|
@@ -4477,7 +4457,7 @@ var CreativeWork = ({
|
|
|
4477
4457
|
for (const video of videosWithPlaylists) {
|
|
4478
4458
|
const hlsPlaylist = findHLSPlaylist(video);
|
|
4479
4459
|
if (hlsPlaylist?.url) {
|
|
4480
|
-
setActivePlaylist(hlsPlaylist
|
|
4460
|
+
setActivePlaylist(hlsPlaylist);
|
|
4481
4461
|
setActiveVideoId(video.id);
|
|
4482
4462
|
hlsPlaylistFound = true;
|
|
4483
4463
|
break;
|