<script>
  import Layout from "$/rendered/Layout.svelte";
  import OGPreview from "$/client/components/OGPreview.svelte";
  import { Hydrate } from '@jamcart/7ty/components';
  import { base_host } from "$/client/config.js";
  import Video from "$/client/components/Video.svelte";
  let source = "/videos/sample.mp4";
  let poster = "/images/sample.jpg";
  let video_background = "rgba(0,0,0,0)";
  let video_props = {
    poster,
    background_color: video_background,
    source,
    starts_on: new Date(Date.now() + 10000)
  }

  let og = {
    "title": "LJSTHW OG/Twitter Video Test", // title of the article
    "description": "A simple test of the OG/Twitter style of sharing cards with video.", // description for inside preview
    "image": poster, // image to display, 5mb/1200/627 max
    "url": `${ base_host }/test_video_card.html`, // URL to article
    "type": "website", // not mentioned on linked in but needed
  }

  let twitter = {
    "card": "player", // must be summary, summary_large_image, app, player
    "creator": "@lzsthw", // @username of content creator
    "description": og.description, // max 200 chars
    "image": og.image,
    "image:alt": "A drawing of Zed by Zed.", // max 420 chars image alt
    "site": "@lzsthw", // @username of site
    "title": og.title,
    "player": `${ base_host }/video_container.html`,
    "player:width": "1280",
    "player:height": "720"
  }
</script>

<style>
  card {
    width: 600px;
  }

  card top {
    background-color: var(--yellow);
    text-align: center;
  }

</style>

<OGPreview og={ og } twitter={ twitter} />

<Layout centered={ true }>
  <card>
    <top>
      <Hydrate component={ Video } props={ video_props } />
    </top>
    <middle>
      <h4>OG/Twitter Video</h4>
      <p>If you visit <a href="https://cards-dev.twitter.com/validator">the Twitter validator tool</a> and enter an internet accessible link to this demo it will show the above video and a description.
      </p>
    </middle>
  </card>
</Layout>
