Skip to content

Fix broken YouTube embedded player caused by recent embed restrictions #10

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
fanchenkong1 wants to merge 1 commit into
base: master
Choose a base branch
from
Open

Fix broken YouTube embedded player caused by recent embed restrictions #10

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion public/manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@
"unlimitedStorage"
],
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self'; frame-src __PLAYER_HOST_URL__;"
},
"description": "Quickly Make video notes and convert into pdf",
"icons": {
Expand Down
31 changes: 31 additions & 0 deletions public/player.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<meta name="referrer" content="strict-origin-when-cross-origin">
<meta name="viewport" content="width=device-width,initial-scale=1" />
<style>
html, body { margin: 0; height: 100%; background: #000; }
iframe { width: 100%; height: 100%; border: 0; display: block; }
</style>
</head>
<body>
<iframe id="yt" allow="autoplay; encrypted-media" allowfullscreen></iframe>
<script>
const p = new URLSearchParams(location.search);
const vid = p.get("vid");
const start = p.get("start") || "0";
const autoplay = p.get("autoplay") || "0";
const origin = location.origin;

const src =
`https://www.youtube.com/embed/${encodeURIComponent(vid)}` +
`?start=${encodeURIComponent(start)}` +
`&autoplay=${encodeURIComponent(autoplay)}` +
`&origin=${encodeURIComponent(origin)}`;

document.getElementById("yt").src = src;
</script>
</body>
</html>

71 changes: 51 additions & 20 deletions src/components/NotesIntract.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
/* global chrome */
import React, { useContext, useEffect, useState } from 'react';
import React, { useContext, useEffect, useMemo, useState } from 'react';
import { CircleArrowRight, ImagePlus, ImagePlusIcon, Link, NotebookPen, Trash2 } from 'lucide-react';
import {
Dialog,
Expand Down Expand Up @@ -59,6 +59,33 @@ export default function NotesIntract({ currentSearch, UserData }) {
});
};

const playableTimestamp = useMemo(() => {
const n = Number(currentTimestamp);
return Number.isFinite(n) && n > 0 ? Math.floor(n) : 0;
}, [currentTimestamp]);

const hostedPlayerUrl = useMemo(() => {
// NOTE: Replace __PLAYER_HOST_URL__ with the HTTPS origin serving player.html
// Example: https://player.example.com
const base = "__PLAYER_HOST_URL__/player.html";

if (!currentSearch) return null;

if (base.startsWith("__PLAYER_HOST_URL__")) {
console.warn(
"[YouTube Study Kit] __PLAYER_HOST_URL__ is not configured. " +
"YouTube playback will not work."
);
return null;
}

const u = new URL(base);
u.searchParams.set("vid", currentSearch);
u.searchParams.set("start", String(playableTimestamp));
u.searchParams.set("autoplay", "1");
return u.toString();
}, [currentSearch, playableTimestamp]);

const handleUpdate = () => {
videoData.data[snapShotInfo.id].imgText = editedText;
chrome.storage.local.set({ userData: UserData }).then(() => {
Expand Down Expand Up @@ -91,26 +118,30 @@ export default function NotesIntract({ currentSearch, UserData }) {
return (
<div className='text-white flex flex-col h-full mx-2'>
{
snapShotInfo.id != -1 ?
(
<div className='rounded-md'>
{
notesMode ?
<img src={videoData?.data[snapShotInfo.id]?.imgUrl || ""} alt={videoData?.data[snapShotInfo.id]?.imgText || ""} />
:
<iframe className='w-full aspect-[16/9]' src={`https://www.youtube.com/embed/${currentSearch}?start=${currentTimestamp}&autoplay=1`} allow="autoplay; encrypted-media" allowFullScreen></iframe>
}
</div>
)
:
(
<div className='text-lg text-gray-400 border rounded-2xl flex-grow-[3] p-2 border-[#2f2f2f] flex items-center justify-center'>
<div className='flex flex-col items-center justify-center gap-1 cursor-pointer'>
<ImagePlus />
<p className='text-sm'>Add new notes</p>
</div>
snapShotInfo.id !== -1 ? (
<div className='rounded-md'>
{notesMode ? (
<img src={videoData?.data[snapShotInfo.id]?.imgUrl || ""} alt={videoData?.data[snapShotInfo.id]?.imgText || ""} />
) : (
hostedPlayerUrl ? (
<iframe
key={`${currentSearch}:${playableTimestamp}`}
className="w-full aspect-[16/9]"
src={hostedPlayerUrl}
allow="autoplay; encrypted-media"
allowFullScreen
/>
) : null
)}
</div>
) : (
<div className='text-lg text-gray-400 border rounded-2xl flex-grow-[3] p-2 border-[#2f2f2f] flex items-center justify-center'>
<div className='flex flex-col items-center justify-center gap-1 cursor-pointer'>
<ImagePlus />
<p className='text-sm'>Add new notes</p>
</div>
)
</div>
)
}

{/* Title and Controls */}
Expand Down