The Video Player
that Stays Out of Your Way

# Install
npm install @elementmints/shadow-plyr
npm install hls.js   # optional — only needed for .m3u8 streams

// main.ts / main.js — registers <shadow-plyr> globally
import '@elementmints/shadow-plyr';

// Listen for custom events
const player = document.querySelector('shadow-plyr');
player.addEventListener('video-ready',    e => console.log('ready', e.detail));
player.addEventListener('video-quartile', e => console.log('quartile', e.detail.quartile));

// Programmatic API
player.play();
player.pause();
player.seek(30);
player.mute();

// app/VideoPlayer.tsx  (Next.js App Router → add 'use client')
'use client';
import { ShadowPlyrReact } from '@elementmints/shadow-plyr/react';

export default function VideoPlayer() {
  return (
    <ShadowPlyrReact
      showControls  showSeekbar   showPlayPause
      showVolume    showFullscreen showSettings
      showQuality   showSubtitles  showThumbnails
      analyticsEvents
      accentColor="#6f8dff"
      mediaTitle="My Video"
      onVideoReady={e => console.log('ready', e.detail)}
      onVideoQuartile={e => trackAnalytics(e.detail.quartile)}
    >
      <source src="video.mp4" type="video/mp4" data-quality="1080" />
    </ShadowPlyrReact>
  );
}

<!-- VideoPlayer.vue -->
<template>
  <ShadowPlyrVue
    :show-controls="true"
    :show-seekbar="true"
    :show-settings="true"
    :show-quality="true"
    :analytics-events="true"
    accent-color="#6f8dff"
    @video-ready="onReady"
    @video-quartile="onQuartile"
  />
</template>

<script setup lang="ts">
import { ShadowPlyrVue } from '@elementmints/shadow-plyr/vue';
const onReady    = (e: CustomEvent) => console.log(e.detail);
const onQuartile = (e: CustomEvent) => trackAnalytics(e.detail.quartile);
</script>

// app.module.ts — allow custom elements
import { NgModule, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
import '@elementmints/shadow-plyr';

@NgModule({ schemas: [CUSTOM_ELEMENTS_SCHEMA] })
export class AppModule {}

<!-- video.component.html -->
<shadow-plyr
  show-controls="true"
  show-seekbar="true"
  show-settings="true"
  accent-color="#6f8dff"
  (video-ready)="onReady($event)"
  (video-quartile)="onQuartile($event)"
></shadow-plyr>

// video.component.ts
onReady(e: CustomEvent)    { console.log('ready', e.detail); }
onQuartile(e: CustomEvent) { trackAnalytics(e.detail.quartile); }