Last active
January 9, 2025 11:37
-
-
Save ogawa0071/9d40d9bdcb74062fb633f431961f3115 to your computer and use it in GitHub Desktop.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="UTF-8" /> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0" /> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <!-- https://github.com/esm-dev/esm.sh/releases/tag/v135 --> | |
| <script type="module" src="https://esm.sh/run" defer></script> | |
| <script type="text/babel"> | |
| import React from "https://esm.sh/react"; | |
| import { createRoot } from "https://esm.sh/react-dom/client?exports=createRoot"; | |
| import { PictureInPicture } from "https://esm.sh/lucide-react?exports=PictureInPicture"; | |
| function App() { | |
| async function handleClick() { | |
| await document.querySelector("video")?.requestPictureInPicture(); | |
| } | |
| return ( | |
| <div class="grid grid-cols-[auto_1fr_auto] items-center gap-2 bg-black px-4 py-2"> | |
| <div class="rounded-lg bg-white p-0.5 text-black"> | |
| <PictureInPicture size={28} /> | |
| </div> | |
| <div class="text-xs font-bold text-white"> | |
| ピクチャ・イン・ピクチャで開く | |
| </div> | |
| <button | |
| onClick={handleClick} | |
| class="rounded-full bg-blue-500 px-4 py-2 text-sm font-bold leading-4 text-white" | |
| > | |
| 開く | |
| </button> | |
| </div> | |
| ); | |
| } | |
| document.body.insertAdjacentHTML("afterbegin", '<div id="pip"></div>'); | |
| createRoot(pip).render(<App />); | |
| </script> | |
| </head> | |
| <body></body> | |
| </html> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| const tailwindcss = document.createElement("script"); | |
| tailwindcss.src = "https://cdn.tailwindcss.com"; | |
| document.head.appendChild(tailwindcss); | |
| const script = document.createElement("script"); | |
| script.type = "module"; | |
| script.textContent = ` | |
| import { | |
| jsx, | |
| jsxs, | |
| } from "https://esm.sh/react/jsx-runtime?exports=jsx,jsxs"; | |
| import { createRoot } from "https://esm.sh/react-dom/client?exports=createRoot"; | |
| import { PictureInPicture } from "https://esm.sh/lucide-react?exports=PictureInPicture"; | |
| function App() { | |
| async function handleClick() { | |
| await document.querySelector("video")?.requestPictureInPicture(); | |
| } | |
| return jsxs("div", { | |
| class: | |
| "grid grid-cols-[auto_1fr_auto] items-center gap-2 bg-black px-4 py-2", | |
| children: [ | |
| jsx("div", { | |
| class: "rounded-lg bg-white p-0.5 text-black", | |
| children: jsx(PictureInPicture, { size: 28 }), | |
| }), | |
| jsx("div", { | |
| class: "text-xs font-bold text-white", | |
| children: | |
| "ピクチャ・イン・ピクチャで開く", | |
| }), | |
| jsx("button", { | |
| onClick: handleClick, | |
| class: | |
| "rounded-full bg-blue-500 px-4 py-2 text-sm font-bold leading-4 text-white", | |
| children: "開く", | |
| }), | |
| ], | |
| }); | |
| } | |
| document.body.insertAdjacentHTML("afterbegin", '<div id="pip"></div>'); | |
| createRoot(pip).render(jsx(App, {})); | |
| `; | |
| document.head.appendChild(script); | |
| completion(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment