mirror of
https://github.com/Shik3i/KoalaSync.git
synced 2026-09-04 15:05:20 +00:00
fix(extension): support cross-origin media frames
This commit is contained in:
KoalaDev
@@ -0,0 +1,32 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Cross-origin internal wrapper switch</title>
|
||||
<style>
|
||||
iframe { width: 640px; height: 360px; border: 0; display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe id="first" allow="autoplay; fullscreen"></iframe>
|
||||
<iframe id="second" allow="autoplay; fullscreen"></iframe>
|
||||
<script>
|
||||
const playerOrigin = `http://127.0.0.1:${location.port}`;
|
||||
const first = document.getElementById('first');
|
||||
const second = document.getElementById('second');
|
||||
first.src = `${playerOrigin}/pages/frames/wrapper-switch-player.html?slot=first&visible=1`;
|
||||
second.src = `${playerOrigin}/pages/frames/wrapper-switch-player.html?slot=second&visible=0`;
|
||||
let loaded = 0;
|
||||
const ready = () => {
|
||||
loaded++;
|
||||
if (loaded === 2) window.__fixtureReady = true;
|
||||
};
|
||||
first.addEventListener('load', ready);
|
||||
second.addEventListener('load', ready);
|
||||
window.switchInternalPlayer = () => {
|
||||
first.contentWindow.postMessage('koala-hide', playerOrigin);
|
||||
second.contentWindow.postMessage('koala-show', playerOrigin);
|
||||
};
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Late cross-origin player</title>
|
||||
<style>body { margin: 0; } iframe { border: 0; }</style>
|
||||
<iframe id="player" width="860" height="490" allowfullscreen></iframe>
|
||||
<script>
|
||||
const player = document.getElementById('player');
|
||||
player.src = `http://127.0.0.1:${location.port}/pages/frames/late-player-frame.html`;
|
||||
player.addEventListener('load', () => { window.__fixtureReady = true; }, { once: true });
|
||||
</script>
|
||||
@@ -0,0 +1,18 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Nested cross-origin player</title>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
iframe { border: 0; }
|
||||
#hidden-player { display: none; }
|
||||
</style>
|
||||
<iframe id="wrapper" width="870" height="500" src="frames/cross-origin-wrapper.html" allowfullscreen></iframe>
|
||||
<iframe id="hidden-player" width="870" height="500" allowfullscreen></iframe>
|
||||
<script>
|
||||
const hidden = document.getElementById('hidden-player');
|
||||
hidden.src = `http://127.0.0.1:${location.port}/pages/frames/player-frame-2.html?hidden=1`;
|
||||
Promise.all([
|
||||
new Promise(resolve => document.getElementById('wrapper').addEventListener('load', resolve, { once: true })),
|
||||
new Promise(resolve => hidden.addEventListener('load', resolve, { once: true }))
|
||||
]).then(() => { window.__fixtureReady = true; });
|
||||
</script>
|
||||
@@ -0,0 +1,13 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Reloading cross-origin player</title>
|
||||
<style>body { margin: 0; } iframe { border: 0; }</style>
|
||||
<iframe id="player" width="860" height="490" allowfullscreen></iframe>
|
||||
<script>
|
||||
const player = document.getElementById('player');
|
||||
player.src = `http://127.0.0.1:${location.port}/pages/frames/player-frame.html?generation=first`;
|
||||
player.addEventListener('load', () => { window.__fixtureReady = true; }, { once: true });
|
||||
window.reloadPlayer = () => {
|
||||
player.src = `http://127.0.0.1:${location.port}/pages/frames/player-frame-2.html?generation=second`;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,38 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Switching cross-origin players</title>
|
||||
<style>
|
||||
body { margin: 0; }
|
||||
iframe { border: 0; }
|
||||
#second { display: none; }
|
||||
</style>
|
||||
<iframe id="first" width="860" height="490" allowfullscreen></iframe>
|
||||
<iframe id="second" width="860" height="490" allowfullscreen></iframe>
|
||||
<script>
|
||||
const first = document.getElementById('first');
|
||||
const second = document.getElementById('second');
|
||||
first.src = `http://127.0.0.1:${location.port}/pages/frames/player-frame.html?slot=first`;
|
||||
second.src = `http://127.0.0.1:${location.port}/pages/frames/player-frame-2.html?slot=second`;
|
||||
Promise.all([
|
||||
new Promise(resolve => first.addEventListener('load', resolve, { once: true })),
|
||||
new Promise(resolve => second.addEventListener('load', resolve, { once: true }))
|
||||
]).then(() => { window.__fixtureReady = true; });
|
||||
window.switchPlayer = () => {
|
||||
first.style.visibility = 'hidden';
|
||||
first.style.position = 'absolute';
|
||||
first.style.left = '-10000px';
|
||||
second.style.display = 'block';
|
||||
};
|
||||
let geometryChurn = null;
|
||||
window.startGeometryChurn = () => {
|
||||
let wide = false;
|
||||
geometryChurn = setInterval(() => {
|
||||
wide = !wide;
|
||||
first.style.width = wide ? '840px' : '800px';
|
||||
}, 80);
|
||||
};
|
||||
window.stopGeometryChurn = () => {
|
||||
clearInterval(geometryChurn);
|
||||
geometryChurn = null;
|
||||
};
|
||||
</script>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Deep hidden cross-origin player</title>
|
||||
<style>body { margin: 0; } iframe { border: 0; } #hidden-wrapper { visibility: hidden; }</style>
|
||||
<iframe id="hidden-wrapper" width="870" height="500" src="frames/deep-wrapper-1.html" allowfullscreen></iframe>
|
||||
<script>
|
||||
document.getElementById('hidden-wrapper').addEventListener('load', () => {
|
||||
window.__fixtureReady = true;
|
||||
}, { once: true });
|
||||
</script>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Cross-origin wrapper</title>
|
||||
<style>body { margin: 0; } iframe { border: 0; }</style>
|
||||
<iframe id="inner-player" width="860" height="490" allowfullscreen></iframe>
|
||||
<script>
|
||||
document.getElementById('inner-player').src =
|
||||
`http://127.0.0.1:${location.port}/pages/frames/player-frame.html?visible=1`;
|
||||
</script>
|
||||
@@ -0,0 +1,5 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Deep wrapper 1</title>
|
||||
<style>body { margin: 0; } iframe { border: 0; }</style>
|
||||
<iframe width="860" height="490" src="deep-wrapper-2.html" allowfullscreen></iframe>
|
||||
@@ -0,0 +1,9 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Deep wrapper 2</title>
|
||||
<style>body { margin: 0; } iframe { border: 0; }</style>
|
||||
<iframe id="deep-player" width="850" height="480" allowfullscreen></iframe>
|
||||
<script>
|
||||
document.getElementById('deep-player').src =
|
||||
`http://127.0.0.1:${location.port}/pages/frames/player-frame-2.html?deep=hidden`;
|
||||
</script>
|
||||
@@ -0,0 +1,15 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Late player frame</title>
|
||||
<style>body { margin: 0; }</style>
|
||||
<script>
|
||||
setTimeout(() => {
|
||||
const video = document.createElement('video');
|
||||
video.id = 'late-player';
|
||||
video.width = 854;
|
||||
video.height = 480;
|
||||
video.controls = true;
|
||||
video.src = '../../media/player-480p-12s.mp4';
|
||||
document.body.append(video);
|
||||
}, 8000);
|
||||
</script>
|
||||
@@ -0,0 +1,30 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Wrapper-switch player</title>
|
||||
<style>
|
||||
html, body { margin: 0; }
|
||||
#wrapper.hidden { visibility: hidden; }
|
||||
video { width: 640px; height: 360px; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div id="wrapper">
|
||||
<video id="player" controls preload="auto"></video>
|
||||
</div>
|
||||
<script>
|
||||
const params = new URLSearchParams(location.search);
|
||||
const wrapper = document.getElementById('wrapper');
|
||||
const player = document.getElementById('player');
|
||||
wrapper.classList.toggle('hidden', params.get('visible') !== '1');
|
||||
player.src = params.get('slot') === 'second'
|
||||
? '../../media/player-1080p-30s.mp4'
|
||||
: '../../media/player-480p-12s.mp4';
|
||||
window.addEventListener('message', event => {
|
||||
if (event.data === 'koala-show') wrapper.classList.remove('hidden');
|
||||
if (event.data === 'koala-hide') wrapper.classList.add('hidden');
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,10 @@
|
||||
<!doctype html>
|
||||
<meta charset="utf-8">
|
||||
<title>Hidden redirected cross-origin player</title>
|
||||
<style>body { margin: 0; } iframe { border: 0; visibility: hidden; }</style>
|
||||
<iframe id="player" width="860" height="490" allowfullscreen></iframe>
|
||||
<script>
|
||||
const player = document.getElementById('player');
|
||||
player.src = `http://localhost:${location.port}/redirect/hidden-player`;
|
||||
player.addEventListener('load', () => { window.__fixtureReady = true; }, { once: true });
|
||||
</script>
|
||||
@@ -0,0 +1,14 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Hidden same-origin frame</title>
|
||||
<style>
|
||||
iframe { width: 800px; height: 450px; border: 0; visibility: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<iframe src="frames/player-frame.html?hidden=same-origin" allow="autoplay; fullscreen"></iframe>
|
||||
<script>window.__fixtureReady = true;</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,22 @@
|
||||
<!doctype html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>CSS player switch</title>
|
||||
<style>
|
||||
video { width: 640px; height: 360px; }
|
||||
#second { visibility: hidden; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<video id="first" controls preload="auto" src="../media/player-480p-12s.mp4"></video>
|
||||
<video id="second" controls preload="auto" src="../media/player-1080p-30s.mp4"></video>
|
||||
<script>
|
||||
window.switchPlayer = () => {
|
||||
document.getElementById('first').style.visibility = 'hidden';
|
||||
document.getElementById('second').style.visibility = 'visible';
|
||||
};
|
||||
window.__fixtureReady = true;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user