@grizzshutsdown/simpleplayer 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 grizz
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,174 @@
+# SimplePlayer
+
+A simple default video player created from [Grizz's portfolio](https://grizz.fyi) for others to use.
+
+SimplePlayer is a framework-free Web Component. It gives you a clean default video player with custom overlay controls, a scrubber, volume, Picture-in-Picture, fullscreen, and lazy loading.
+
+## Installation
+
+```bash
+npm install @grizzshutsdown/simpleplayer
+pnpm add @grizzshutsdown/simpleplayer
+yarn add @grizzshutsdown/simpleplayer
+bun add @grizzshutsdown/simpleplayer
+```
+
+## Usage
+
+```js
+import '@grizzshutsdown/simpleplayer';
+```
+
+```html
+<simple-player src="/video.mp4"></simple-player>
+```
+
+Add the extra control tray when you want volume, Picture-in-Picture, and fullscreen:
+
+```html
+<simple-player src="/video.mp4" controls></simple-player>
+```
+
+## Frameworks
+
+React:
+
+```jsx
+import '@grizzshutsdown/simpleplayer';
+
+export function App() {
+  return <simple-player src="/video.mp4" aspect-ratio="16 / 9" />;
+}
+```
+
+Vue:
+
+```vue
+<script setup>
+import '@grizzshutsdown/simpleplayer';
+</script>
+
+<template>
+  <simple-player src="/video.mp4" aspect-ratio="16 / 9" />
+</template>
+```
+
+Svelte:
+
+```svelte
+<script>
+  import '@grizzshutsdown/simpleplayer';
+</script>
+
+<simple-player src="/video.mp4" aspect-ratio="16 / 9" />
+```
+
+TypeScript with React:
+
+```ts
+import type { DetailedHTMLProps, HTMLAttributes } from 'react';
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'simple-player': DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement> & {
+        src?: string;
+        'aspect-ratio'?: string;
+        'preload-margin'?: string;
+        controls?: boolean;
+        'disable-autoplay'?: boolean;
+      };
+    }
+  }
+}
+```
+
+## Options
+
+```html
+<simple-player
+  src="/video.mp4"
+  aspect-ratio="16 / 9"
+  preload-margin="360px 0px">
+</simple-player>
+```
+
+- `src`: video URL.
+- `aspect-ratio`: player aspect ratio. Default: `16 / 9`.
+- `preload-margin`: lazy-load margin before the video enters view. Default: `360px 0px`.
+- `controls`: add volume, Picture-in-Picture, and fullscreen controls.
+- `disable-autoplay`: turn off default autoplay. Autoplay starts muted so browsers allow it.
+
+The default player matches the simple preview: play/pause, scrubber, muted autoplay, and no extra side controls.
+
+Keep the HTML clean and manage controls with JavaScript:
+
+```js
+const player = document.querySelector('simple-player');
+
+player.src = '/next-video.mp4';
+player.aspectRatio = '1 / 1';
+player.preloadMargin = '240px 0px';
+player.autoplayEnabled = false;
+player.controlsEnabled = true;
+player.volumeEnabled = true;
+player.volumeSliderEnabled = false;
+player.pictureInPictureEnabled = true;
+player.fullscreenEnabled = true;
+```
+
+## Contributing
+
+```bash
+npm install
+npm run dev
+```
+
+The dev playground lives in `dev/` and imports `src/simple-player.ts` directly. Use it when changing the player itself. The production site demo is separate and runs with:
+
+```bash
+npm run demo
+```
+
+Before opening a pull request, run:
+
+```bash
+npm run build
+npm pack --dry-run
+```
+
+## Styling
+
+```css
+simple-player {
+  --overlay-soft: rgb(0 0 0 / 0.42);
+  --overlay-blur: 0px;
+
+  --sp-glass-surface: rgb(255 255 255 / 0.04);
+  --sp-glass-opacity: 0.28;
+
+  --sp-control-glass-surface: rgb(255 255 255 / 0.12);
+  --sp-control-glass-opacity: 0.62;
+  --sp-control-hover-surface: rgb(255 255 255 / 0.14);
+  --sp-control-tray-padding: 2px;
+  --sp-control-slot-size: 24px;
+  --sp-control-icon-render-size: 20px;
+  --sp-control-icon-stroke-width: 1.6;
+}
+```
+
+## AI Skill
+
+The package includes a plain Markdown skill that any AI tool can read.
+
+```bash
+npx @grizzshutsdown/simpleplayer
+```
+
+## Found this useful?
+
+Follow [Grizz](https://x.com/GrizzShutsDown).
+
+## License
+
+MIT

package/bin/install-skill.js

@@ -0,0 +1,43 @@
+#!/usr/bin/env node
+
+import { cpSync, existsSync, mkdirSync, rmSync } from 'node:fs';
+import { dirname, join, resolve } from 'node:path';
+import { fileURLToPath } from 'node:url';
+
+const packageRoot = resolve(dirname(fileURLToPath(import.meta.url)), '..');
+const source = join(packageRoot, 'skill', 'simpleplayer');
+const args = process.argv.slice(2);
+
+const help = `
+SimplePlayer skill installer
+
+Usage:
+  npx @grizzshutsdown/simpleplayer
+
+Options:
+  --help   Show this help
+`;
+
+if (args.includes('--help') || args.includes('-h')) {
+  console.log(help.trim());
+  process.exit(0);
+}
+
+const skillsDir = resolve(
+  process.env.SIMPLEPLAYER_SKILLS_DIR ||
+    process.env.AI_SKILLS_DIR ||
+    join(process.env.HOME || process.cwd(), '.ai', 'skills'),
+);
+const target = join(skillsDir, 'simpleplayer');
+
+if (!existsSync(source)) {
+  console.error('Could not find the bundled simpleplayer skill.');
+  process.exit(1);
+}
+
+mkdirSync(skillsDir, { recursive: true });
+rmSync(target, { recursive: true, force: true });
+cpSync(source, target, { recursive: true });
+
+console.log(`Installed SimplePlayer skill to ${target}`);
+console.log(`Use this skills directory in your AI tool: ${skillsDir}`);

package/dist/simple-player.d.ts

@@ -0,0 +1,31 @@
+export declare class SimplePlayer extends HTMLElement {
+    #private;
+    static observedAttributes: string[];
+    constructor();
+    get src(): string;
+    set src(value: string);
+    get aspectRatio(): string;
+    set aspectRatio(value: string);
+    get preloadMargin(): string;
+    set preloadMargin(value: string);
+    get autoplayEnabled(): boolean;
+    set autoplayEnabled(value: boolean);
+    get controlsEnabled(): boolean;
+    set controlsEnabled(value: boolean);
+    get volumeEnabled(): boolean;
+    set volumeEnabled(value: boolean);
+    get volumeSliderEnabled(): boolean;
+    set volumeSliderEnabled(value: boolean);
+    get pictureInPictureEnabled(): boolean;
+    set pictureInPictureEnabled(value: boolean);
+    get fullscreenEnabled(): boolean;
+    set fullscreenEnabled(value: boolean);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: string, oldValue: string | null, newValue: string | null): void;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'simple-player': SimplePlayer;
+    }
+}