mirror of
https://github.com/hanzoai/shadcn.git
synced 2026-11-03 03:18:52 +00:00
zeekay
e0ec477433
- Enable all 15 finance component docs (from .disabled → .mdx) - Create stock-market.mdx, 8 chart docs, 8 block docs, 2 framework docs - Add direction.tsx component (RTL/LTR support from upstream shadcn) - Add xs/icon-xs button sizes, data-variant/data-size attributes - Fix build-registry.mts to handle default exports in namespace re-exports - Add default props to order-entry, positions-list, orders-history, trading-panel - Fix 18 navigation stubs → re-export from root implementations - Add 44 orphaned MDX files to nav (installation, dark-mode, desktop, guides, etc) - Migrate 6 framer-motion imports → motion/react - Bump React 19.2.0→19.2.4, Next.js 16.0.1→16.1.6, motion→12.34.0 - Align lucide-react, sonner v2, tailwind-merge v3, postcss-selector-parser v7 - Remove framer-motion dep (superseded by motion) - Fix @types/react-dom, TypeScript versions across workspaces
13 lines
3.2 KiB
JSON
13 lines
3.2 KiB
JSON
{
|
|
"name": "youtube-pip-player-demo",
|
|
"registryDependencies": [
|
|
"youtube-pip-player"
|
|
],
|
|
"files": [
|
|
{
|
|
"name": "youtube-pip-player-demo.tsx",
|
|
"content": "\"use client\"\n\nimport { YouTubePipPlayer } from \"@/registry/default/ui/youtube-pip-player\"\n\nexport function YouTubePipPlayerDemo() {\n return (\n <div className=\"space-y-8 p-6 bg-black min-h-screen\">\n <section>\n <h2 className=\"text-2xl font-bold mb-4 text-white\">\n YouTube PIP Player - Hero Section\n </h2>\n <p className=\"text-white/60 mb-4\">\n Scroll down to see the video transition into a draggable\n Picture-in-Picture window. The PIP window can be resized (normal →\n double → fullscreen) and closed.\n </p>\n <YouTubePipPlayer\n videoId=\"dQw4w9WgXcQ\"\n size=\"hero\"\n enablePip={true}\n enableTvEffects={true}\n showLiveIndicator={true}\n defaultMuted={true}\n onMuteChange={(muted) => console.log(\"Mute state:\", muted)}\n onPipEnter={() => console.log(\"Entered PIP mode\")}\n onPipExit={() => console.log(\"Exited PIP mode\")}\n />\n </section>\n\n {/* Spacer content to enable scrolling */}\n <div className=\"space-y-8 py-20\">\n <section className=\"max-w-2xl mx-auto\">\n <h3 className=\"text-xl font-bold text-white mb-4\">Features</h3>\n <ul className=\"space-y-2 text-white/70\">\n <li>• Scroll-based PIP activation</li>\n <li>• Draggable PIP window with corner snapping</li>\n <li>• Three size modes: normal, double, fullscreen</li>\n <li>• TV-style visual effects (glow, scan lines, grain)</li>\n <li>• Live indicator badge</li>\n <li>• Global mute control</li>\n <li>• Video rotation support</li>\n <li>• Mobile-friendly (PIP hidden on mobile)</li>\n </ul>\n </section>\n\n <section className=\"max-w-2xl mx-auto\">\n <h3 className=\"text-xl font-bold text-white mb-4\">\n Multiple Videos (Auto-Rotate)\n </h3>\n <YouTubePipPlayer\n videoId={[\"dQw4w9WgXcQ\", \"jNQXAC9IVRw\", \"9bZkp7q19f0\"]}\n rotationInterval={15000}\n size=\"md\"\n enablePip={false}\n enableTvEffects={false}\n showLiveIndicator={false}\n />\n </section>\n\n <section className=\"max-w-2xl mx-auto\">\n <h3 className=\"text-xl font-bold text-white mb-4\">\n Without TV Effects\n </h3>\n <YouTubePipPlayer\n videoId=\"dQw4w9WgXcQ\"\n size=\"sm\"\n enablePip={false}\n enableTvEffects={false}\n showLiveIndicator={false}\n />\n </section>\n\n {/* More spacer for scroll */}\n <div className=\"h-[100vh] flex items-center justify-center\">\n <p className=\"text-white/40 text-center\">\n Keep scrolling to see the PIP window appear!\n </p>\n </div>\n </div>\n </div>\n )\n}\n\nexport default YouTubePipPlayerDemo\n"
|
|
}
|
|
],
|
|
"type": "components:example"
|
|
} |