Skip to content

Commit 495f401

Browse files
stdavisstdavis
committed
fix: fix video popups
1 parent bc5906f commit 495f401

2 files changed

Lines changed: 54 additions & 34 deletions

File tree

‎public/video-popup.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>Video</title>
7+
<style>
8+
html,
9+
body,
10+
#player {
11+
height: 100%;
12+
margin: 0;
13+
}
14+
15+
body {
16+
overflow: hidden;
17+
}
18+
</style>
19+
</head>
20+
<body>
21+
<div id="player"></div>
22+
</body>
23+
</html>

‎src/Video.tsx‎

Lines changed: 31 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -232,53 +232,50 @@ const Video = ({ GPS_Track_ID, Date_Time, URL, pointsLayer, mapView, testWarning
232232
player.current.pauseVideo();
233233
}
234234

235-
const popupWindow = window.open('', 'roadsVideo', 'width=640,height=390,location=0');
235+
const popupUrl = new window.URL(`${import.meta.env.BASE_URL}video-popup.html`, window.location.href);
236+
const popupWindow = window.open(popupUrl, 'roadsVideo', 'width=640,height=390,location=0');
237+
238+
if (!popupWindow) {
239+
return;
240+
}
236241

237242
const id = getIDFromUrl(URL);
238-
const playerContainer = popupWindow.document.createElement('div');
239-
playerContainer.style.width = '100%';
240-
playerContainer.style.height = '100%';
241-
popupWindow.document.body.appendChild(playerContainer);
242-
243-
const popupPlayer = new YT.Player(playerContainer, {
244-
height: '100%',
245-
width: '100%',
246-
videoId: id,
247-
// https://developers.google.com/youtube/player_parameters
248-
playerVars: {
249-
enablejsapi: 1,
250-
origin: popupWindow.location.origin,
251-
rel: 0,
252-
},
253-
events: {
254-
onStateChange: onPlayerStateChange,
255-
onReady: (event) => {
256-
if (player.current) {
257-
event.target.seekTo(player.current.getCurrentTime(), true);
258-
}
243+
let popupPlayer;
244+
const initializePopupPlayer = () => {
245+
popupPlayer = new YT.Player(popupWindow.document.getElementById('player'), {
246+
height: '100%',
247+
width: '100%',
248+
videoId: id,
249+
// https://developers.google.com/youtube/player_parameters
250+
playerVars: {
251+
enablejsapi: 1,
252+
origin: window.location.origin,
253+
widget_referrer: window.location.href,
254+
rel: 0,
259255
},
260-
},
261-
});
256+
events: {
257+
onStateChange: onPlayerStateChange,
258+
onReady: (event) => {
259+
if (player.current) {
260+
event.target.seekTo(player.current.getCurrentTime(), true);
261+
}
262+
},
263+
},
264+
});
265+
};
266+
267+
popupWindow.addEventListener('load', initializePopupPlayer, { once: true });
262268

263-
popupWindow.document.body.style.margin = 0;
264269
popupWindow.addEventListener('unload', () => {
265270
window.clearInterval(intervalId.current);
266-
popupPlayer.destroy();
271+
popupPlayer?.destroy();
267272
window.cancelAnimationFrame(requestAnimationId.current);
268273
});
269274

270275
// close popup window if the main window is closed or reloaded
271276
window.addEventListener('unload', () => {
272277
popupWindow.close();
273278
});
274-
275-
// need to wait a bit for the window to finish laying out
276-
// otherwise the iframe has 0 height
277-
window.setTimeout(() => {
278-
const iframe = popupPlayer.getIframe();
279-
iframe.width = '100%';
280-
iframe.height = '100%';
281-
}, 500);
282279
};
283280

284281
return (

0 commit comments

Comments
 (0)