worldmonitor/api/youtube/embed.js at main · NhoThoang/worldmonitor

Repository navigation

History

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

163

164

export const config = { runtime: 'edge' };

function parseFlag(value, fallback = '1') {

if (value === '0' || value === '1') return value;

return fallback;

}

function sanitizeVideoId(value) {

if (typeof value !== 'string') return null;

return /^[A-Za-z0-9_-]{11}$/.test(value) ? value : null;

}

const ALLOWED_ORIGINS = [

/^https:\/\/(.*\.)?worldmonitor\.app$/,

/^https:\/\/worldmonitor-[a-z0-9-]+-elie-habib-projects\.vercel\.app$/,

/^https:\/\/worldmonitor-[a-z0-9-]+\.vercel\.app$/,

/^https?:\/\/localhost(:\d+)?$/,

/^https?:\/\/127\.0\.0\.1(:\d+)?$/,

/^tauri:\/\/localhost$/,

];

const ALLOWED_PARENT_ORIGINS = [

...ALLOWED_ORIGINS,

/^https?:\/\/tauri\.localhost$/,

/^https?:\/\/[a-z0-9-]+\.tauri\.localhost$/,

];

function sanitizeAllowedOrigin(raw, fallback, allowList = ALLOWED_ORIGINS) {

if (!raw) return fallback;

try {

const parsed = new URL(raw);

if (!['https:', 'http:', 'tauri:'].includes(parsed.protocol)) {

return fallback;

}

const origin = parsed.origin !== 'null' ? parsed.origin : raw;

if (allowList.some(p => p.test(origin))) return origin;

} catch { /* invalid URL */ }

return fallback;

}

function sanitizeOrigin(raw) {

return sanitizeAllowedOrigin(raw, 'https://worldmonitor.app', ALLOWED_ORIGINS);

}

function sanitizeParentOrigin(raw, fallback) {

return sanitizeAllowedOrigin(raw, fallback, ALLOWED_PARENT_ORIGINS);

}

export default async function handler(request) {

const url = new URL(request.url);

const videoId = sanitizeVideoId(url.searchParams.get('videoId'));

if (!videoId) {

return new Response('Missing or invalid videoId', {

status: 400,

headers: { 'content-type': 'text/plain; charset=utf-8' },

});

}

const autoplay = parseFlag(url.searchParams.get('autoplay'), '1');

const mute = parseFlag(url.searchParams.get('mute'), '1');

const vq = ['small', 'medium', 'large', 'hd720', 'hd1080'].includes(url.searchParams.get('vq') || '') ? url.searchParams.get('vq') : '';

const origin = sanitizeOrigin(url.searchParams.get('origin'));

const parentOrigin = sanitizeParentOrigin(url.searchParams.get('parentOrigin'), origin);

const embedSrc = new URL(`https://www.youtube.com/embed/${videoId}`);

embedSrc.searchParams.set('autoplay', autoplay);

embedSrc.searchParams.set('mute', mute);

embedSrc.searchParams.set('playsinline', '1');

embedSrc.searchParams.set('rel', '0');

embedSrc.searchParams.set('controls', '1');

embedSrc.searchParams.set('enablejsapi', '1');

embedSrc.searchParams.set('origin', origin);

embedSrc.searchParams.set('widget_referrer', origin);

const html = `<!doctype html>

<head>

<style>

html,body{margin:0;padding:0;width:100%;height:100%;background:#000;overflow:hidden}

#player{width:100%;height:100%}

#play-overlay{position:absolute;inset:0;z-index:10;display:flex;align-items:center;justify-content:center;cursor:pointer;background:rgba(0,0,0,0.4)}

#play-overlay svg{width:72px;height:72px;opacity:0.9;filter:drop-shadow(0 2px 8px rgba(0,0,0,0.5))}

#play-overlay.hidden{display:none}

</style>

</head>

<body>

var tag=document.createElement('script');

tag.src='https://www.youtube.com/iframe_api';

document.head.appendChild(tag);

var player,overlay=document.getElementById('play-overlay'),started=false,muteSyncIntervalId,parentOrigin=${JSON.stringify(parentOrigin)},allowedOrigin=${JSON.stringify(parentOrigin)};

function hideOverlay(){overlay.classList.add('hidden')}

function readMuted(){

if(!player)return null;

if(typeof player.isMuted==='function')return player.isMuted();

if(typeof player.getVolume==='function')return player.getVolume()===0;

return null;

}

function stopMuteSync(){if(muteSyncIntervalId){clearInterval(muteSyncIntervalId);muteSyncIntervalId=null}}

function startMuteSync(){

if(muteSyncIntervalId)return;

var lastMuted=readMuted();

if(lastMuted!==null)window.parent.postMessage({type:'yt-mute-state',muted:lastMuted},parentOrigin);

muteSyncIntervalId=setInterval(function(){

var m=readMuted();

if(m!==null&&m!==lastMuted){lastMuted=m;window.parent.postMessage({type:'yt-mute-state',muted:m},parentOrigin)}

},500);

}

function onYouTubeIframeAPIReady(){

player=new YT.Player('player',{

videoId:'${videoId}',

host:'https://www.youtube.com',

playerVars:{autoplay:${autoplay},mute:${mute},playsinline:1,rel:0,controls:1,modestbranding:1,enablejsapi:1,origin:${JSON.stringify(origin)},widget_referrer:${JSON.stringify(origin)}},

events:{

onReady:function(){

window.parent.postMessage({type:'yt-ready'},parentOrigin);

${vq ? `if(player.setPlaybackQuality)player.setPlaybackQuality('${vq}');` : ''}

if(${autoplay}===1){player.playVideo()}

startMuteSync();

onError:function(e){stopMuteSync();window.parent.postMessage({type:'yt-error',code:e.data},parentOrigin)},

onStateChange:function(e){

window.parent.postMessage({type:'yt-state',state:e.data},parentOrigin);

if(e.data===1||e.data===3){hideOverlay();started=true}

}

});

}

overlay.addEventListener('click',function(){

if(player&&player.playVideo){player.playVideo();player.unMute();hideOverlay()}

});

setTimeout(function(){if(!started)overlay.classList.remove('hidden')},3000);

window.addEventListener('message',function(e){

if(allowedOrigin!=='*'&&e.origin!==allowedOrigin)return;

if(!player||!player.getPlayerState)return;

var m=e.data;if(!m||!m.type)return;

switch(m.type){

case'play':player.playVideo();break;

case'pause':player.pauseVideo();break;

case'mute':player.mute();break;

case'unmute':player.unMute();break;

case'loadVideo':if(m.videoId)player.loadVideoById(m.videoId);break;

case'setQuality':if(m.quality&&player.setPlaybackQuality)player.setPlaybackQuality(m.quality);break;

}

});

</script>

</body>

</html>`;

return new Response(html, {

status: 200,

headers: {

'content-type': 'text/html; charset=utf-8',

'cache-control': 'public, s-maxage=900, stale-while-revalidate=300',

});

}

FilesExpand file tree

embed.js

Latest commit

History

embed.js

File metadata and controls