@stackshift-ui/youtube-video 6.0.2 → 6.0.4-beta.0

package/package.json

@@ -1,14 +1,15 @@
 {
   "name": "@stackshift-ui/youtube-video",
   "description": "",
-  "version": "6.0.2",
+  "version": "6.0.4-beta.0",
   "private": false,
   "sideEffects": false,
   "main": "./dist/index.js",
   "module": "./dist/index.mjs",
   "types": "./dist/index.d.ts",
   "files": [
-    "dist/**"
+    "dist/**",
+    "src"
   ],
   "author": "WebriQ <info@webriq.com>",
   "devDependencies": {
@@ -28,19 +29,19 @@
     "typescript": "^5.6.2",
     "vite-tsconfig-paths": "^5.0.1",
     "vitest": "^2.1.1",
-    "@stackshift-ui/eslint-config": "6.0.2",
-    "@stackshift-ui/typescript-config": "6.0.2"
+    "@stackshift-ui/typescript-config": "6.0.3-beta.0",
+    "@stackshift-ui/eslint-config": "6.0.3-beta.0"
   },
   "dependencies": {
-    "@stackshift-ui/system": "6.0.2",
-    "@stackshift-ui/scripts": "6.0.2"
+    "@stackshift-ui/scripts": "6.0.3-beta.0",
+    "@stackshift-ui/system": "6.0.4-beta.0"
   },
   "peerDependencies": {
     "@types/react": "16.8 - 19",
     "next": "10 - 14",
     "react": "16.8 - 19",
     "react-dom": "16.8 - 19",
-    "@stackshift-ui/system": ">=0.0.0"
+    "@stackshift-ui/system": ">=6.0.4-beta.0"
   },
   "peerDependenciesMeta": {
     "next": {

package/src/index.ts

@@ -0,0 +1,4 @@
+"use client";
+
+// component exports
+export * from "./youtube-video";

package/src/youtube-video.test.tsx

@@ -0,0 +1,13 @@
+import { cleanup, render, screen } from "@testing-library/react";
+import { afterEach, describe, test } from "vitest";
+import { YoutubeVideo } from "./youtube-video";
+
+describe.concurrent("youtube-video", () => {
+  afterEach(cleanup);
+
+  test("Common: YouTube Video - test if renders without errors", ({ expect }) => {
+    const clx = "aspect-video";
+    render(<YoutubeVideo className={clx} />);
+    expect(screen.getByTestId("div").classList).toContain(clx);
+  });
+});

package/src/youtube-video.tsx

@@ -0,0 +1,39 @@
+import { DefaultComponent, useStackShiftUIComponents } from "@stackshift-ui/system";
+import type { ElementType, HTMLProps, ReactNode } from "react";
+
+export interface YoutubeVideoProps extends Omit<HTMLProps<HTMLElement>, "as"> {
+  videoLinkId?: string;
+  title?: string;
+  children?: ReactNode;
+  className?: string;
+  as?: ElementType;
+}
+
+const displayName = "YoutubeVideo";
+
+export const YoutubeVideo: React.FC<YoutubeVideoProps> = ({
+  videoLinkId,
+  title,
+  children,
+  className,
+  as,
+  ...props
+}) => {
+  const { [displayName]: Component = DefaultComponent } = useStackShiftUIComponents();
+  const defaultClass = "aspect-video";
+
+  return (
+    <Component as={as} className={defaultClass} {...props} data-testid={displayName}>
+      <iframe
+        aria-label="Show Video Frame"
+        className="w-full h-full rounded-lg"
+        src={`https://www.youtube.com/embed/${videoLinkId}`}
+        srcDoc={`<style>*{padding:0;margin:0;overflow:hidden;border-radius:8px}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a href=${`https://www.youtube.com/embed/${videoLinkId}`}><img src=${`https://i.ytimg.com/vi_webp/${videoLinkId}/maxresdefault.webp`} alt=${title} loading="lazy" /><span>▶</span></a>`}
+        frameBorder="0"
+        loading="lazy"
+        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"></iframe>
+    </Component>
+  );
+};
+
+YoutubeVideo.displayName = displayName;