Docs

.gitignore

@@ -85,6 +85,8 @@ typings/
 dist
 lib
 types
+.astro/
+docs_dist
 
 # Gatsby files
 .cache/

astro.config.ts

@@ -0,0 +1,33 @@
+import { defineConfig } from 'astro/config';
+import starlight from '@astrojs/starlight';
+import tailwind from '@astrojs/tailwind';
+import meta from './docs/meta'
+import { StarlightUserConfigWithPlugins } from '@astrojs/starlight/utils/plugins';
+
+// https://astro.build/config
+export default defineConfig({
+	srcDir: './docs',
+	outDir: './docs_dist',
+	integrations: [
+		tailwind({ applyBaseStyles: false }),
+		starlight({
+			title: 'Uscreen Video Player',
+			social: {
+				github: 'https://github.com/Uscreen-video/video-player',
+			},
+			customCss: [
+				'@fontsource/manrope/600.css',
+				'./docs/styles.css',
+			],
+			expressiveCode: {
+        frames: {
+          showCopyToClipboardButton: true
+        },
+        useStarlightDarkModeSwitch: true,
+        useStarlightUiThemeColors: true
+      },
+
+			...(meta as Partial<StarlightUserConfigWithPlugins>)
+		}),
+	],
+});

docs/components/Header.astro

@@ -0,0 +1,41 @@
+---
+import type { Props } from '@astrojs/starlight/props';
+
+import Search from '@astrojs/starlight/components/Search.astro';
+import SiteTitle from '@astrojs/starlight/components/SiteTitle.astro';
+import SocialIcons from '@astrojs/starlight/components/SocialIcons.astro';
+import ThemeSelect from '@astrojs/starlight/components/ThemeSelect.astro';
+
+---
+
+<nav class="flex h-full">
+	<a 
+		href="/" 
+		area-lable="Uscreen.tv logo" 
+		class="
+			self-center text-black dark:text-white select-none
+			flex items-center no-underline font-title font-semibold
+		"
+	>
+		<svg class="hidden lg:block lg:w-28" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 880.25 153.48">
+			<path d="M260.8 148.96c-8.71 0-17.24-1.33-25.35-3.95-4.73-1.53-8.92-3.37-12.53-5.49-4.03-2.38-5.71-7.34-3.9-11.65 2.13-5.08 8.16-7.16 13.03-4.58 2.58 1.37 5.35 2.6 8.32 3.68 6.74 2.46 13.62 3.71 20.43 3.71 8.44 0 14.83-1.46 19-4.34 4.25-2.93 6.32-6.69 6.32-11.5 0-3.52-1.16-6.35-3.54-8.65-2.33-2.24-5.33-4.02-8.9-5.29-3.56-1.26-8.48-2.71-14.62-4.31-8.6-2.17-15.67-4.37-21-6.54-5.3-2.16-9.93-5.59-13.73-10.2-3.8-4.6-5.73-10.91-5.73-18.76 0-6.6 1.71-12.69 5.09-18.09 3.38-5.41 8.54-9.76 15.35-12.95 6.82-3.19 15.29-4.81 25.17-4.81 6.87 0 13.74.93 20.41 2.75 3.45.95 6.68 2.11 9.66 3.5 4.41 2.05 6.47 7.17 4.74 11.71l-.02.03c-1.89 4.95-7.52 7.26-12.38 5.17-2.23-.95-4.49-1.77-6.78-2.46-5.41-1.61-10.72-2.42-15.79-2.42-8.33 0-14.62 1.52-18.68 4.51-4.14 3.05-6.15 6.98-6.15 12.02 0 3.53 1.16 6.33 3.54 8.56 2.33 2.19 5.33 3.94 8.9 5.2 3.54 1.26 8.46 2.71 14.62 4.31 8.39 2.06 15.37 4.23 20.76 6.45 5.36 2.22 10.01 5.65 13.82 10.21 3.8 4.55 5.72 10.77 5.72 18.5 0 6.6-1.71 12.66-5.09 18-3.38 5.35-8.57 9.67-15.43 12.86-6.88 3.2-15.38 4.82-25.26 4.82zM378.41 148.74c-33.95 0-61.57-27.62-61.57-61.57s27.62-61.57 61.57-61.57c8.87 0 17.45 1.85 25.33 5.42 6.11 2.77 8.02 10.52 3.91 15.82-2.94 3.79-8.09 5.09-12.46 3.11a40.545 40.545 0 0 0-16.4-3.59c-22.01-.2-40.09 16.82-41.14 38.81-1.12 23.4 17.6 42.8 40.76 42.8 5.86 0 11.52-1.22 16.73-3.57 4.39-1.98 9.56-.72 12.51 3.08 4.11 5.3 2.2 13.05-3.91 15.82-7.88 3.58-16.46 5.44-25.33 5.44zM691.27 148.38c-33.95 0-61.54-27.75-61.28-61.76.26-33.33 27.47-60.55 60.8-60.8 34.01-.26 61.76 27.33 61.76 61.28v.1c-.01 5.54-4.56 10-10.1 10h-91.09l.77 2.4c5.47 17.1 21.2 28.59 39.14 28.59 10.48 0 20.55-4.08 28.11-11.17 3.11-2.92 7.75-3.53 11.54-1.55 6.14 3.2 7.36 11.51 2.32 16.26-11.23 10.6-26.15 16.65-41.97 16.65zm0-102.37c-17.94 0-33.67 11.49-39.14 28.59l-.77 2.4h79.82l-.77-2.4c-5.47-17.1-21.2-28.59-39.14-28.59zM555.84 148.38c-33.95 0-61.54-27.75-61.28-61.76.26-33.33 27.47-60.55 60.8-60.8 34.01-.26 61.76 27.33 61.76 61.28v.1c-.01 5.54-4.56 10-10.1 10h-91.1l.78 2.41c5.47 17.1 21.2 28.59 39.14 28.59 10.48 0 20.55-4.08 28.11-11.17 3.11-2.92 7.75-3.53 11.54-1.55 6.14 3.2 7.36 11.51 2.32 16.26-11.23 10.59-26.15 16.64-41.97 16.64zm0-102.37c-17.94 0-33.67 11.49-39.14 28.59l-.77 2.4h79.82l-.77-2.4c-5.47-17.1-21.2-28.59-39.14-28.59zM858.92 135.28V82.3c0-19.21-15.34-35.15-34.55-35.34-19.4-.19-35.24 15.54-35.24 34.89v53.43c0 5.89-4.78 10.67-10.67 10.67s-10.67-4.78-10.67-10.67V82.4c0-31.08 24.99-56.68 56.07-56.77 31.08-.09 56.38 25.17 56.38 56.23v53.43c0 5.89-4.78 10.67-10.67 10.67-5.88-.01-10.65-4.79-10.65-10.68zM425.9 135.95V84.23c0-30.9 25.05-55.94 55.94-55.94 5.73 0 10.38 4.65 10.38 10.38s-4.65 10.38-10.38 10.38c-19.43 0-35.18 15.75-35.18 35.18v51.72c0 5.73-4.65 10.38-10.38 10.38-5.73.01-10.38-4.64-10.38-10.38zM66.37 153.48C29.86 153.47 0 123.01 0 86.51V11.07C0 4.95 4.95 0 11.07 0c6.11 0 11.07 4.95 11.07 11.07V86.6c0 24.43 19.58 44.61 44.01 44.75 24.53.14 44.53-19.77 44.53-44.27V11.07c0-6.11 4.95-11.07 11.07-11.07 6.11 0 11.07 4.95 11.07 11.07v76.02c-.02 36.62-29.82 66.41-66.45 66.39z" style="fill:currentColor"></path>
+			<path d="m200.73 78.46-36.72-23c-3.82-2.39-8.77.35-8.77 4.86v45.99c0 4.5 4.95 7.25 8.77 4.86l36.72-23c3.59-2.24 3.59-7.47 0-9.71z" style="fill:#016aff"></path>
+		</svg>
+		<svg class="lg:hidden w-8" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="90 50 170 220">
+			<path d="M211.4 172.36c-1.37.86-2.83 1.56-4.33 2.1V183c0 21.45-17.45 38.91-38.89 38.91h-.24c-21.33-.12-38.68-17.79-38.68-39.39v-66.08c0-9.06-7.37-16.43-16.43-16.43s-16.43 7.37-16.43 16.43v65.99c0 19.11 7.47 37.2 21.04 50.94 13.62 13.79 31.62 21.39 50.68 21.4h.03c39.57 0 71.76-32.19 71.76-71.76v-28.49l-28.51 17.84z" style="fill:currentColor"></path>
+			<path d="M245.1 121.24 203.04 94.9c-4.37-2.74-10.04.41-10.04 5.56v52.67c0 5.16 5.67 8.3 10.04 5.56l42.06-26.33c4.1-2.57 4.1-8.55 0-11.12z" style="fill:#016aff"></path>
+		</svg>
+		<span class="mx-2">
+			|
+		</span>
+		<span class="text-xl">
+			Video Player
+		</span>
+	</a>
+	<div class="ms-auto flex h-full space-x-2 items-center">
+		<div class="min-w-36">
+			<Search {...Astro.props} />
+		</div>
+		<SocialIcons {...Astro.props} />
+	</div>
+</nav>

docs/components/Hero.astro

@@ -0,0 +1,218 @@
+---
+import { Image } from 'astro:assets';
+const { data } = Astro.props.entry;
+---
+<script>
+  import anime from 'https://cdn.jsdelivr.net/npm/[email protected]/+esm'
+  import 'https://cdn.jsdelivr.net/npm/@uscreentv/video-player/+esm'
+
+  const softShadow = 'rgba(0, 0, 0, 0.45) 0px 25px 20px -20px'
+  const hardShadow = 'rgba(0, 0, 0, 0.4) 0px 2px 4px, rgba(0, 0, 0, 0.3) 0px 7px 13px -3px, rgba(0, 0, 0, 0.2) 0px -3px 0px inset'
+
+  anime
+    .timeline({ easing: 'easeOutExpo', duration: 750 })
+    .add({
+      targets: '.player',
+      perspective: 2000,
+      opacity: 1,
+    })
+    .add({
+      targets: '.player',
+      translateZ: -100,
+    }, 400)
+    .add({
+      targets: '.player',
+      rotateX: 40,
+      translateX: -10,
+      translateY: -50,
+    })
+    .add({
+      targets: 'video',
+      translateX: 10,
+      translateY: -15,
+      boxShadow: softShadow,
+      opacity: 1
+      // rotateZ: -10,
+    })
+    .add({
+      targets: 'video-controls',
+      translateX: 25,
+      translateY: -35,
+      boxShadow: softShadow,
+      opacity: 1,
+    })
+    .add({
+      targets: 'video-timeline',
+      translateY: -30,
+    })
+    .add({
+      targets: 'video-controls > *:not(video-timeline)',
+      translateX: (_, i) => 5 + i*2,
+      translateY: -20,
+      boxShadow: hardShadow,
+      left: 5,
+      background: '#000',
+      borderRadius: "4px",
+      delay: (_, i) => i * 100,
+    }, '-=750')
+    .add({
+      targets: '.uscreen-logo',
+      opacity: 1,
+    })
+    .add({
+      targets: '.element-description',
+      opacity: 1,
+    }, '-=750')
+
+</script>
+
+<div class="hero container">
+  <div class="player rounded-lg border-white border-4 shadow-lg opacity-0 scale-90">
+    <video-player 
+      storage-key="uscreen:player" 
+      idle-timeout="3000">
+      <video
+        preload="metadata"
+        slot="video"
+        autoplay
+        playsinline
+        muted
+        title="My test video"
+        class="bg-transparent rounded-lg shadow opacity-0"
+      >
+        <source 
+          src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
+          type="application/x-mpegURL"
+        />
+      </video>
+      <video-controls class="pb-0 rounded-b-lg opacity-0">
+        <video-timeline>
+          <video-timer></video-timer>
+        </video-timeline>
+        <video-play-button>
+        </video-play-button>
+        <video-forward-button>
+        </video-forward-button>
+        <video-backward-button>
+        </video-backward-button>
+        <video-volume-button>
+        </video-volume-button>
+        <video-volume-control></video-volume-control>
+        <hr class="ms-auto"/>
+        <video-subtitles-button>
+        </video-subtitles-button>
+        <video-settings-button>
+        </video-settings-button>
+        <video-airplay-button></video-airplay-button>
+        <video-pip-button>
+        </video-pip-button>
+        <video-chromecast-button>
+        </video-chromecast-button>
+        <video-fullscreen-button>
+        </video-fullscreen-button>
+      </video-controls>
+      <video-cues></video-cues>
+      <div class="uscreen-logo opacity-0 absolute inset-0 text-center text-white flex flex-col items-center justify-center">
+        <a
+          area-label="Uscreen website"
+          href="https://www.uscreen.tv/"
+          target="_blank"
+          class="block leading-none shadow rounded-full overflow-hidden transition-shadow hover:shadow-lg"
+        >
+          <svg class="w-10 h-10 lg:h-20 lg:w-20 shadow rounded-full" viewBox="0 0 337 337" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <g clip-path="url(#clip0_1_252)">
+            <path d="M228.02 336.32H109.58C49.4201 336.32 0.640137 287.54 0.640137 227.38V108.94C0.640137 48.78 49.4201 0 109.58 0H228.01C288.18 0 336.95 48.78 336.95 108.94V227.37C336.96 287.54 288.18 336.32 228.02 336.32Z" fill="white"/>
+            <path d="M212.04 172.36C210.67 173.22 209.21 173.92 207.71 174.46V183C207.71 204.45 190.26 221.91 168.82 221.91H168.58C147.25 221.79 129.9 204.12 129.9 182.52V116.44C129.9 107.38 122.53 100.01 113.47 100.01C104.41 100.01 97.0402 107.38 97.0402 116.44V182.43C97.0402 201.54 104.51 219.63 118.08 233.37C131.7 247.16 149.7 254.76 168.76 254.77H168.79C208.36 254.77 240.55 222.58 240.55 183.01V154.52L212.04 172.36Z" fill="#0F172A"/>
+            <path d="M261.575 121.333L219.648 95.3194C215.292 92.6133 209.64 95.7243 209.64 100.811V152.829C209.64 157.925 215.292 161.026 219.648 158.32L261.575 132.316C265.662 129.778 265.662 123.872 261.575 121.333Z" fill="#006AFF"/>
+            </g>
+            <defs>
+            <clipPath id="clip0_1_252">
+            <rect width="336.32" height="336.32" fill="white" transform="translate(0.640137)"/>
+            </clipPath>
+            </defs>
+          </svg>
+        </a>
+      </div>
+    </video-player>
+  </div>
+  <div class="description flex -top-[60px] relative">
+    <a class="element-description text-accent">
+      <div class="element-descriotion-pointer h-[45px]"></div>
+      <code class="text-nowrap">&lt;video-container&gt;</code>
+    </a>
+    <a class="element-description text-emerald-400 ms-10">
+      <div class="element-descriotion-pointer h-[65px]"></div>
+      <code class="text-nowrap">&lt;video&gt;</code>
+    </a>
+    <a class="element-description text-indigo-400 ms-10">
+      <div class="element-descriotion-pointer h-[90px]"></div>
+      <code class="text-nowrap">&lt;video-controls&gt;</code>
+    </a>
+    <a class="element-description text-fuchsia-400 ms-10">
+      <div class="element-descriotion-pointer h-[265px]"></div>
+      <code class="text-nowrap">&lt;custom-html&gt;</code>
+    </a>
+    <a class="element-description text-pink-400 ms-auto">
+      <div class="element-descriotion-pointer h-[90px] left-auto right-[20px]"></div>
+      <code class="text-nowrap">&lt;video-button&gt;</code>
+    </a>
+  </div>
+</div>
+<div class="conteiner text-center space-x-4 -top-10 relative">
+  <a
+    href="/intro"
+    class="cta-primary">
+    Get Started
+  </a>
+  <a
+  href="/guides/get-started"
+  class="cta-secondary">
+  API Reference
+</a>
+</div>
+
+<style>
+  .element-description {
+    position: relative;
+    opacity: 0;
+  }
+  .element-descriotion-pointer {
+    position: absolute;
+    width: 2px;
+    bottom: 100%;
+    border-radius: 2px;
+    left: 10px;
+    background-color: currentColor;
+  }
+  .element-descriotion-pointer:before{
+    content: ' ';
+    width: 8px;
+    height: 8px;
+    border-radius: 50%;
+    position: absolute;
+    bottom: calc(100% - 2px);
+    left: calc(50% - 4px);
+    border: 2px solid currentColor;
+  }
+  .cta-primary, .cta-secondary{
+    background: linear-gradient(180deg, #238aff, #07f);
+    text-decoration: none;
+    border-radius: 9999px;
+    color: #fff;
+    padding: .75rem 1.5rem;
+    margin-top: .5rem;
+    text-shadow: 0 1px 1px #00387838;
+    box-shadow: 0 1px 2px #00295738;
+    user-select: none;
+    -webkit-tap-highlight-color: transparent;
+  }
+  .cta-secondary{
+    background: transparent;
+    color: var(--tw-ring-color);
+    border: 1px solid var(--tw-ring-color);
+  }
+  .cta-primary:hover, .cta-secondary:hover{
+    box-shadow: 0 5px 30px -10px #0078ffab;
+    filter: brightness(1.05);
+  }
+</style>

docs/content/config.ts

@@ -0,0 +1,6 @@
+import { defineCollection } from 'astro:content';
+import { docsSchema } from '@astrojs/starlight/schema';
+
+export const collections = {
+	docs: defineCollection({ schema: docsSchema() }),
+};

docs/content/docs/guides/get-started.md

@@ -0,0 +1,38 @@
+---
+title: Getting started
+description: Learn how to integrate Uscreen Video Player
+---
+
+### Installing from CDN
+
+To incorporate the Uscreen Video Player into your project, add the following scripts within the `<head>` section of your HTML document. These scripts include both ES module for modern browsers and CommonJS versions for compatibility with older browsers.
+
+```html
+<script type="module" src="https://cdn.jsdelivr.net/npm/@uscreentv/video-player/+esm"></script>
+<script nomodule src="https://cdn.jsdelivr.net/npm/@uscreentv/video-player"></script>
+```
+
+### Implementing the Player
+
+Once the scripts are added, you can start utilizing the web components provided by Uscreen's video player according to your requirements. However, ensure that all elements are enclosed within the `<video-player>` component, which facilitates controller logic implementation. In the future, these components can be leveraged to manage video states, emit commands, and more.
+
+```html
+<video-player>
+  <video slot="video">
+    <source 
+      src="https://test-streams.mux.dev/x36xhzz/x36xhzz.m3u8"
+      type="application/x-mpegURL"
+    />
+  </video>
+  <video-controls>
+    <video-timeline>
+      <video-timer></video-timer>
+    </video-timeline>
+    <video-play-button>
+    </video-play-button>
+    <!-- Additional controls can be found in the /reference/controls directory -->
+  </video-controls>
+</video-player>
+```
+
+With this setup, you can seamlessly integrate the Uscreen Video Player into your project and tailor the viewing experience to meet your specific needs.

docs/content/docs/index.mdx

@@ -0,0 +1,7 @@
+---
+title: Welcome
+description: Get started building your docs site with Starlight.
+template: splash
+hero:
+  title: ''
+---

docs/content/docs/intro/index.mdx

@@ -0,0 +1,34 @@
+---
+title: Uscreen Video Player
+description: Learn about the Uscreen Video Player
+---
+
+The **Uscreen Video Player** is a highly adaptable and versatile solution designed 
+to seamlessly integrate into any website or application. 
+This state-of-the-art player offers an extensive range of features 
+aimed at enriching the viewing experience while providing developers with unprecedented flexibility.
+
+### Built with Web Components
+
+The Uscreen Video Player has a unique feature of being built on web components, 
+which makes it highly flexible and customizable for developers. 
+This means that developers can easily tailor each element of the 
+player to suit their specific requirements. With web components, 
+you can easily control the player's appearance and behavior using Tailwind CSS, 
+without the need for extensive JavaScript coding. 
+This makes it easier and faster to make changes to the player's design.
+
+### Extensibility Redefined
+
+Unlock endless possibilities with the Player's 
+extendable nature straight out of the box. Whether you're yearning for 
+more control or dreaming up your own components, the rich API and event 
+model provide the perfect canvas. With seamless integration and a 
+wealth of resources at your fingertips, building and extending components 
+has never been more delightful. Discover how to unleash your 
+creativity further in the following sections.
+
+
+
+
+

docs/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />