Playground

"use client";

import { SeamPlayer, type SeamPlayerProps } from "seamplayer";

const options = {
  "src": [
    {
      "src": "/demo/film.mp4",
      "height": 720
    },
    {
      "src": "/demo/film-480.mp4",
      "height": 480
    },
    {
      "src": "/demo/film-360.mp4",
      "height": 360
    }
  ],
  "title": "Creators around the world",
  "fps": 24,
  "theme": {
    "accent": "#e0115f",
    "accentText": "#ffffff",
    "radius": "16px",
    "font": "\"Instrument Sans\", sans-serif",
    "monoFont": "\"JetBrains Mono\", monospace"
  },
  "duration": 29,
  "poster": "/demo/poster.jpg",
  "thumbnails": {
    "url": "/demo/scrub.jpg",
    "width": 320,
    "height": 180,
    "columns": 10,
    "count": 29,
    "interval": 1
  },
  "chapters": [
    {
      "start": 0,
      "title": "Lisbon"
    },
    {
      "start": 4,
      "title": "Western Norway"
    },
    {
      "start": 9,
      "title": "Mumbai"
    },
    {
      "start": 13,
      "title": "Goa"
    },
    {
      "start": 17,
      "title": "Lagos"
    },
    {
      "start": 21,
      "title": "Mexico City"
    },
    {
      "start": 25,
      "title": "Tokyo"
    }
  ],
  "captions": [
    {
      "src": "/demo/places.vtt",
      "lang": "en",
      "label": "English"
    }
  ],
  "download": [
    {
      "url": "/demo/film.mp4",
      "label": "720p",
      "filename": "creators-around-the-world-720p.mp4",
      "size": 3274724
    },
    {
      "url": "/demo/film-480.mp4",
      "label": "480p",
      "filename": "creators-around-the-world-480p.mp4",
      "size": 1991535
    },
    {
      "url": "/demo/film-360.mp4",
      "label": "360p",
      "filename": "creators-around-the-world-360p.mp4",
      "size": 1406970
    }
  ],
  "shareUrl": "/seamplayer",
  "resumeKey": "seamplayer-playground-qualities"
} satisfies SeamPlayerProps;

export default function PlayerExample() {
  return (
    <div id="playground">
      <SeamPlayer
        {...options}
      />
    </div>
  );
}