create-bubbles 0.1.11 → 0.1.13

package/template-vp-react-shadcn/src/components/Player/index.ts

@@ -0,0 +1,7 @@
+export {
+  default as VideoJS,
+  VIDEO_JS_SOURCE_TYPES,
+  type VideoJSProps,
+  type VideoJSSource,
+  type VideoJSSourceType,
+} from "./VideoJS";

package/template-vp-react-shadcn/src/components/ui/button.tsx

@@ -0,0 +1,67 @@
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
+import { Slot } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+const buttonVariants = cva(
+  "group/button inline-flex shrink-0 items-center justify-center rounded-lg border border-transparent bg-clip-padding text-sm font-medium whitespace-nowrap transition-all outline-none select-none focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 active:not-aria-[haspopup]:translate-y-px disabled:pointer-events-none disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground [a]:hover:bg-primary/80",
+        outline:
+          "border-border bg-background hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:border-input dark:bg-input/30 dark:hover:bg-input/50",
+        secondary:
+          "bg-secondary text-secondary-foreground hover:bg-secondary/80 aria-expanded:bg-secondary aria-expanded:text-secondary-foreground",
+        ghost:
+          "hover:bg-muted hover:text-foreground aria-expanded:bg-muted aria-expanded:text-foreground dark:hover:bg-muted/50",
+        destructive:
+          "bg-destructive/10 text-destructive hover:bg-destructive/20 focus-visible:border-destructive/40 focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:hover:bg-destructive/30 dark:focus-visible:ring-destructive/40",
+        link: "text-primary underline-offset-4 hover:underline",
+      },
+      size: {
+        default:
+          "h-8 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        xs: "h-6 gap-1 rounded-[min(var(--radius-md),10px)] px-2 text-xs in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3",
+        sm: "h-7 gap-1 rounded-[min(var(--radius-md),12px)] px-2.5 text-[0.8rem] in-data-[slot=button-group]:rounded-lg has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 [&_svg:not([class*='size-'])]:size-3.5",
+        lg: "h-9 gap-1.5 px-2.5 has-data-[icon=inline-end]:pr-2 has-data-[icon=inline-start]:pl-2",
+        icon: "size-8",
+        "icon-xs":
+          "size-6 rounded-[min(var(--radius-md),10px)] in-data-[slot=button-group]:rounded-lg [&_svg:not([class*='size-'])]:size-3",
+        "icon-sm":
+          "size-7 rounded-[min(var(--radius-md),12px)] in-data-[slot=button-group]:rounded-lg",
+        "icon-lg": "size-9",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default",
+    },
+  },
+);
+
+function Button({
+  className,
+  variant = "default",
+  size = "default",
+  asChild = false,
+  ...props
+}: React.ComponentProps<"button"> &
+  VariantProps<typeof buttonVariants> & {
+    asChild?: boolean;
+  }) {
+  const Comp = asChild ? Slot.Root : "button";
+
+  return (
+    <Comp
+      data-slot="button"
+      data-variant={variant}
+      data-size={size}
+      className={cn(buttonVariants({ variant, size, className }))}
+      {...props}
+    />
+  );
+}
+
+export { Button, buttonVariants };

package/template-vp-react-shadcn/src/components/ui/sonner.tsx

@@ -0,0 +1,43 @@
+import { useTheme } from "next-themes";
+import { Toaster as Sonner, type ToasterProps } from "sonner";
+import {
+  CircleCheckIcon,
+  InfoIcon,
+  TriangleAlertIcon,
+  OctagonXIcon,
+  Loader2Icon,
+} from "lucide-react";
+
+const Toaster = ({ ...props }: ToasterProps) => {
+  const { theme = "system" } = useTheme();
+
+  return (
+    <Sonner
+      theme={theme as ToasterProps["theme"]}
+      className="toaster group"
+      icons={{
+        success: <CircleCheckIcon className="size-4" />,
+        info: <InfoIcon className="size-4" />,
+        warning: <TriangleAlertIcon className="size-4" />,
+        error: <OctagonXIcon className="size-4" />,
+        loading: <Loader2Icon className="size-4 animate-spin" />,
+      }}
+      style={
+        {
+          "--normal-bg": "var(--popover)",
+          "--normal-text": "var(--popover-foreground)",
+          "--normal-border": "var(--border)",
+          "--border-radius": "var(--radius)",
+        } as React.CSSProperties
+      }
+      toastOptions={{
+        classNames: {
+          toast: "cn-toast",
+        },
+      }}
+      {...props}
+    />
+  );
+};
+
+export { Toaster };

package/template-vp-react-shadcn/src/components/ui/spinner.tsx

@@ -0,0 +1,17 @@
+import { Loader2Icon } from "lucide-react";
+import type { ComponentProps } from "react";
+
+import { cn } from "@/lib/utils";
+
+function Spinner({ className, ...props }: ComponentProps<"svg">) {
+  return (
+    <Loader2Icon
+      role="status"
+      aria-label="Loading"
+      className={cn("size-4 animate-spin", className)}
+      {...props}
+    />
+  );
+}
+
+export { Spinner };

package/template-vp-react-shadcn/src/lib/utils.ts

@@ -0,0 +1,6 @@
+import { clsx, type ClassValue } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+export function cn(...inputs: ClassValue[]) {
+  return twMerge(clsx(inputs));
+}

package/template-vp-react-shadcn/src/main.tsx

@@ -0,0 +1,5 @@
+import { createRoot } from "react-dom/client";
+import "./styles/index.css";
+import App from "./App.tsx";
+
+createRoot(document.getElementById("root")!).render(<App />);

package/template-vp-react-shadcn/src/pages/home/index.tsx

@@ -0,0 +1,96 @@
+import { PlayCircle } from "lucide-react";
+import { useState } from "react";
+
+import { VideoJS, VIDEO_JS_SOURCE_TYPES, type VideoJSSourceType } from "@/components/Player";
+import { Button } from "@/components/ui/button";
+import { cn } from "@/lib/utils";
+
+const HOME_TEXT = {
+  player: "VideoJS 播放器",
+  title: "HLS / MP4 播放示例",
+  play: "播放",
+} as const;
+
+type DemoSource = {
+  id: Exclude<VideoJSSourceType, "auto" | "native">;
+  name: string;
+  src: string;
+  type: string;
+  poster: string;
+};
+
+const DEMO_SOURCES: DemoSource[] = [
+  {
+    id: VIDEO_JS_SOURCE_TYPES.HLS,
+    name: "HLS",
+    src: "https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8",
+    type: "application/vnd.apple.mpegurl",
+    poster: "https://image.mux.com/x36xhzz/thumbnail.jpg?time=0",
+  },
+  {
+    id: VIDEO_JS_SOURCE_TYPES.MP4,
+    name: "MP4",
+    src: "https://media.w3.org/2010/05/sintel/trailer.mp4",
+    type: "video/mp4",
+    poster: "https://media.w3.org/2010/05/sintel/poster.png",
+  },
+];
+
+const Home = () => {
+  const [activeSourceType, setActiveSourceType] = useState<DemoSource["id"]>(
+    VIDEO_JS_SOURCE_TYPES.HLS,
+  );
+  const activeSource =
+    DEMO_SOURCES.find((source) => source.id === activeSourceType) ?? DEMO_SOURCES[0];
+
+  return (
+    <main className="min-h-screen bg-zinc-950 px-4 py-6 text-white sm:px-6 lg:px-8">
+      <section className="mx-auto flex w-full max-w-6xl flex-col gap-5">
+        <div className="flex flex-col gap-4 sm:flex-row sm:items-end sm:justify-between">
+          <div className="space-y-2">
+            <p className="text-sm font-medium text-emerald-300">{HOME_TEXT.player}</p>
+            <h1 className="max-w-2xl text-3xl font-semibold tracking-normal text-white sm:text-4xl">
+              {HOME_TEXT.title}
+            </h1>
+          </div>
+
+          <div className="flex rounded-lg border border-white/10 bg-white/5 p-1">
+            {DEMO_SOURCES.map((source) => {
+              const isActive = source.id === activeSource.id;
+
+              return (
+                <Button
+                  key={source.id}
+                  type="button"
+                  variant="ghost"
+                  className={cn(
+                    "h-9 gap-2 rounded-md px-4 text-white hover:bg-white/10 hover:text-white",
+                    isActive && "bg-white text-zinc-950 hover:bg-white hover:text-zinc-950",
+                  )}
+                  onClick={() => setActiveSourceType(source.id)}
+                >
+                  <PlayCircle className="size-4" />
+                  {source.name}
+                </Button>
+              );
+            })}
+          </div>
+        </div>
+
+        <VideoJS
+          key={activeSource.src}
+          src={activeSource.src}
+          type={activeSource.type}
+          sourceType={activeSource.id}
+          poster={activeSource.poster}
+          preload="metadata"
+          className="border border-white/10 shadow-2xl shadow-black/40"
+        />
+      </section>
+
+      <Button>{HOME_TEXT.play}</Button>
+    </main>
+  );
+};
+
+export default Home;

package/template-vp-react-shadcn/src/router/index.tsx

@@ -0,0 +1,25 @@
+import { createBrowserRouter, Navigate, type RouteObject } from "react-router";
+
+export const lazyLoad = (path: string, fileName = "index") => {
+  const Module = lazy(() => import(`@/pages/${path}/${fileName}.tsx`));
+  return <Module />;
+};
+
+const routes: RouteObject[] = [
+  {
+    path: "/",
+    id: "index",
+    element: <Navigate to={"/home"} />,
+  },
+  {
+    path: "/home",
+    id: "home",
+    element: lazyLoad("home"),
+  },
+];
+
+export const router = createBrowserRouter(routes, {
+  basename: "/",
+});
+
+export const navigator = router.navigate;

package/template-vp-react-shadcn/src/styles/index.css

@@ -0,0 +1,16 @@
+@import "tailwindcss";
+@import "tw-animate-css";
+@import "@fontsource-variable/geist";
+@import "./shadcn.css";
+
+html,
+body {
+  margin: 0;
+  padding: 0;
+}
+
+html,
+body,
+#root {
+  height: 100%;
+}

package/template-vp-react-shadcn/src/styles/shadcn.css

@@ -0,0 +1,127 @@
+@import "shadcn/tailwind.css";
+
+@custom-variant dark (&:is(.dark *));
+
+@theme inline {
+  --font-heading: var(--font-sans);
+  --font-sans: "Geist Variable", sans-serif;
+  --color-sidebar-ring: var(--sidebar-ring);
+  --color-sidebar-border: var(--sidebar-border);
+  --color-sidebar-accent-foreground: var(--sidebar-accent-foreground);
+  --color-sidebar-accent: var(--sidebar-accent);
+  --color-sidebar-primary-foreground: var(--sidebar-primary-foreground);
+  --color-sidebar-primary: var(--sidebar-primary);
+  --color-sidebar-foreground: var(--sidebar-foreground);
+  --color-sidebar: var(--sidebar);
+  --color-chart-5: var(--chart-5);
+  --color-chart-4: var(--chart-4);
+  --color-chart-3: var(--chart-3);
+  --color-chart-2: var(--chart-2);
+  --color-chart-1: var(--chart-1);
+  --color-ring: var(--ring);
+  --color-input: var(--input);
+  --color-border: var(--border);
+  --color-destructive: var(--destructive);
+  --color-accent-foreground: var(--accent-foreground);
+  --color-accent: var(--accent);
+  --color-muted-foreground: var(--muted-foreground);
+  --color-muted: var(--muted);
+  --color-secondary-foreground: var(--secondary-foreground);
+  --color-secondary: var(--secondary);
+  --color-primary-foreground: var(--primary-foreground);
+  --color-primary: var(--primary);
+  --color-popover-foreground: var(--popover-foreground);
+  --color-popover: var(--popover);
+  --color-card-foreground: var(--card-foreground);
+  --color-card: var(--card);
+  --color-foreground: var(--foreground);
+  --color-background: var(--background);
+  --radius-sm: calc(var(--radius) * 0.6);
+  --radius-md: calc(var(--radius) * 0.8);
+  --radius-lg: var(--radius);
+  --radius-xl: calc(var(--radius) * 1.4);
+  --radius-2xl: calc(var(--radius) * 1.8);
+  --radius-3xl: calc(var(--radius) * 2.2);
+  --radius-4xl: calc(var(--radius) * 2.6);
+}
+
+:root {
+  --background: oklch(1 0 0);
+  --foreground: oklch(0.145 0 0);
+  --card: oklch(1 0 0);
+  --card-foreground: oklch(0.145 0 0);
+  --popover: oklch(1 0 0);
+  --popover-foreground: oklch(0.145 0 0);
+  --primary: rgb(47 123 255);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.97 0 0);
+  --secondary-foreground: oklch(0.205 0 0);
+  --muted: oklch(0.97 0 0);
+  --muted-foreground: oklch(0.556 0 0);
+  --accent: oklch(0.97 0 0);
+  --accent-foreground: oklch(0.205 0 0);
+  --destructive: oklch(0.577 0.245 27.325);
+  --border: oklch(0.922 0 0);
+  --input: oklch(0.922 0 0);
+  --ring: rgb(47 123 255);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --radius: 0.625rem;
+  --sidebar: oklch(0.985 0 0);
+  --sidebar-foreground: oklch(0.145 0 0);
+  --sidebar-primary: rgb(47 123 255);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.97 0 0);
+  --sidebar-accent-foreground: oklch(0.205 0 0);
+  --sidebar-border: oklch(0.922 0 0);
+  --sidebar-ring: rgb(47 123 255);
+}
+
+.dark {
+  --background: oklch(0.145 0 0);
+  --foreground: oklch(0.985 0 0);
+  --card: oklch(0.205 0 0);
+  --card-foreground: oklch(0.985 0 0);
+  --popover: oklch(0.205 0 0);
+  --popover-foreground: oklch(0.985 0 0);
+  --primary: rgb(47 123 255);
+  --primary-foreground: oklch(0.985 0 0);
+  --secondary: oklch(0.269 0 0);
+  --secondary-foreground: oklch(0.985 0 0);
+  --muted: oklch(0.269 0 0);
+  --muted-foreground: oklch(0.708 0 0);
+  --accent: oklch(0.269 0 0);
+  --accent-foreground: oklch(0.985 0 0);
+  --destructive: oklch(0.704 0.191 22.216);
+  --border: oklch(1 0 0 / 10%);
+  --input: oklch(1 0 0 / 15%);
+  --ring: rgb(47 123 255);
+  --chart-1: oklch(0.87 0 0);
+  --chart-2: oklch(0.556 0 0);
+  --chart-3: oklch(0.439 0 0);
+  --chart-4: oklch(0.371 0 0);
+  --chart-5: oklch(0.269 0 0);
+  --sidebar: oklch(0.205 0 0);
+  --sidebar-foreground: oklch(0.985 0 0);
+  --sidebar-primary: rgb(47 123 255);
+  --sidebar-primary-foreground: oklch(0.985 0 0);
+  --sidebar-accent: oklch(0.269 0 0);
+  --sidebar-accent-foreground: oklch(0.985 0 0);
+  --sidebar-border: oklch(1 0 0 / 10%);
+  --sidebar-ring: rgb(47 123 255);
+}
+
+@layer base {
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+  html {
+    @apply font-sans;
+  }
+}

package/template-vp-react-shadcn/src/types/auto-imports.d.ts

@@ -0,0 +1,58 @@
+/* eslint-disable */
+/* prettier-ignore */
+// @ts-nocheck
+// noinspection JSUnusedGlobalSymbols
+// Generated by unplugin-auto-import
+// biome-ignore lint: disable
+export {}
+declare global {
+  const Activity: typeof import('react').Activity
+  const Fragment: typeof import('react').Fragment
+  const Suspense: typeof import('react').Suspense
+  const cache: typeof import('react').cache
+  const cacheSignal: typeof import('react').cacheSignal
+  const createContext: typeof import('react').createContext
+  const createPortal: typeof import('react-dom').createPortal
+  const createRef: typeof import('react').createRef
+  const flushSync: typeof import('react-dom').flushSync
+  const forwardRef: typeof import('react').forwardRef
+  const lazy: typeof import('react').lazy
+  const memo: typeof import('react').memo
+  const preconnect: typeof import('react-dom').preconnect
+  const prefetchDNS: typeof import('react-dom').prefetchDNS
+  const preinit: typeof import('react-dom').preinit
+  const preinitModule: typeof import('react-dom').preinitModule
+  const preload: typeof import('react-dom').preload
+  const preloadModule: typeof import('react-dom').preloadModule
+  const startTransition: typeof import('react').startTransition
+  const use: typeof import('react').use
+  const useActionState: typeof import('react').useActionState
+  const useCallback: typeof import('react').useCallback
+  const useContext: typeof import('react').useContext
+  const useDebugValue: typeof import('react').useDebugValue
+  const useDeferredValue: typeof import('react').useDeferredValue
+  const useEffect: typeof import('react').useEffect
+  const useEffectEvent: typeof import('react').useEffectEvent
+  const useFormStatus: typeof import('react-dom').useFormStatus
+  const useHref: typeof import('react-router').useHref
+  const useId: typeof import('react').useId
+  const useImperativeHandle: typeof import('react').useImperativeHandle
+  const useInRouterContext: typeof import('react-router').useInRouterContext
+  const useInsertionEffect: typeof import('react').useInsertionEffect
+  const useLayoutEffect: typeof import('react').useLayoutEffect
+  const useLocation: typeof import('react-router').useLocation
+  const useMemo: typeof import('react').useMemo
+  const useNavigate: typeof import('react-router').useNavigate
+  const useNavigationType: typeof import('react-router').useNavigationType
+  const useOptimistic: typeof import('react').useOptimistic
+  const useOutlet: typeof import('react-router').useOutlet
+  const useOutletContext: typeof import('react-router').useOutletContext
+  const useParams: typeof import('react-router').useParams
+  const useReducer: typeof import('react').useReducer
+  const useRef: typeof import('react').useRef
+  const useResolvedPath: typeof import('react-router').useResolvedPath
+  const useRoutes: typeof import('react-router').useRoutes
+  const useState: typeof import('react').useState
+  const useSyncExternalStore: typeof import('react').useSyncExternalStore
+  const useTransition: typeof import('react').useTransition
+}

package/template-vp-react-shadcn/src/utils/env/index.tsx

@@ -0,0 +1,6 @@
+export const envVariables = {
+  /**
+   * API 前缀
+   */
+  API_AFFIX: import.meta.env.VITE_API_AFFIX ?? "",
+};