<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Discord Embedder from AV1 server 1.0.12</title>
  <base href="/">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  {{ if (imageLink) { }}
  <meta property="og:image" content="{{=imageLink}}">
  <meta property="og:type" content="video.other">
  <meta property="og:video:url" content="{{=videoLink}}">
  <meta property="og:video:width" content="1280">
  <meta property="og:video:height" content="720">
  {{ } else { }}
  <meta property="og:type" content="website" />
  <meta property="og:url" content="{{=siteUrl}}" />
  <meta property="og:image" content="/heart.png" />
  <meta property="og:description" content="Simple site to help with embedding of AV1 videos and large/external videos into Discord." />
  <meta property="og:title" content="Discord Embedder Helper Website" />
  {{ } }}
  <link rel="icon" type="image/png" href="/favicon.png">
  <style>

:root {
  --content-max-width: 1280px;
  --bg: black;
  --bg-content-alt: #333;
  --color: #d7dadc;
  --link: #bb4d00;
  --button-border: 1px solid #f57c00;
  --button-bg: #ffad42;
  --button-fg: #000;
  --error: red;
}
    
/* Box sizing rules */
*, *::before, *::after { box-sizing: border-box;
}

/* Remove default margin */
body, h1, h2, h3, h4, p, figure, blockquote, dl, dd {
  margin: 0;
}

body {
  min-height: 100vh;
  text-rendering: optimizeSpeed;
  line-height: 1.5;
  font-size: 16px;
  padding: 1rem 0.5rem;
  font-family: sans-serif;
  background: var(--bg);
  color: var(--color);
}

input, button, textarea, select {
  font: inherit;
}

h1 {
  font-size: 1.88rem;
}
h2 {
  font-size: 1.66rem;
}
h3 {
  font-size: 1.44rem;
}
h4 {
  font-size: 1.22rem;
}
h5 {
  font-size: 1.0rem;
}

a, a:visited, button {
  text-decoration: none;
  border: none;
  padding: 0;
  margin: 0;
  font-weight: bold;
  cursor: pointer;
}


input[type=text] {
  border: 1px solid var(--color);
  background: var(--bg);
  color: var(--color);
  border-radius: 0;
  padding: 0.25rem;
  line-height: 1rem;
  outline: none;
  width: 100%;
}

label {
  font-size: 0.75rem;
  font-weight: 500;
  margin-top: 1rem;
  margin-bottom: 0.25rem;
  display: block;
}

input[type=text]:hover,
input[type=text]:active,
input[type=text]:focus {
  border-color: var(--link);
}

input[type=text]:focus {
  outline: 1px solid var(--link);
}

button,
input[type=submit] {
  border: var(--button-border);
  background: var(--button-bg);
  color: var(--button-fg);
  padding: 0.25rem 1rem;
  margin: 1rem 0 2rem;
}

pre {
  background: var(--bg-content-alt);
  padding: 0.5rem;
  white-space: break-spaces;
  word-break: break-all;
}

.row {
  display: flex;
  flex-wrap: wrap;
}

.row-item {
  flex: 2 0 200px;
  align-self: flex-end;
}

.row-item input {
  width: 100%;
}

.row-inbetween {
  align-self: flex-end;
  padding: 0.25rem 1rem;
}

.error {
  color: var(--error);
  font-size: 0.8rem;
  padding: 1rem 1rem 0;
}

.center {
  text-align: center;
}

video {
  max-width: calc(100vw - 2rem);
  max-height: calc(100vh - 140px);
}

.inside {
  width: 100%;
  max-width: var(--content-max-width);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0 auto;
}

  </style>
</head>
<body>
  {{ if (videoLink && imageLink) { }}
    <p>Your link is:</p>
    <pre>{{=siteUrl}}</pre>
    <div class="center">
      <video controls poster="{{=imageLink}}">
        <source src="{{=videoLink}}">
      </video>
    </div>
  {{ } }}
  <form action="/" method="post" enctype="multipart/form-data" class="inside">
    <h1>Create/generate embed url</h1>
    {{ if (error) { }}<p class="error">{{=error}}</p>{{ } }}
    <label>Video link</label>
    <input id="inputVideo" type="text" name="video" value="{{=inputVideo}}">
    <div class="row">
      <div class="row-item">
        <label>Image link (required for proper discord embed)</label>
        <input id="inputImage" type="text" name="image" value="{{=inputImage}}">
      </div>
      <span class="row-inbetween">or</span>
      <div class="row-item">
        <label>Upload image file (max 8MiB)</label>
        <input type="file" name="media">
      </div>
    </div>
    
    <input type="submit" value="Generate short url">
  </form>

  <p>
    Alternatively, copy paste the following full url:
  </p>
  <pre id="generateurl">
    {{=siteUrlBase}}?v=&lt;video link&gt;&amp;i=&lt;image link&gt;
  </pre>
  <script type="text/javascript" nonce="{{=nonce}}">
    var baseSite = '{{=siteUrlBase}}';
    var generateurl = document.getElementById('generateurl');
    var inputVideo = document.getElementById('inputVideo');
    var inputImage = document.getElementById('inputImage');
    var isExample = true;

    function checkChange() {
      var currentIsExample = true;
      if (inputVideo.value && inputImage.value) {
        currentIsExample = false;
      }
      if (isExample && currentIsExample) { return; }
      isExample = currentIsExample;
      if (isExample) {
        generateurl.innerText = baseSite + '?v=<video link>&i=<image link>';
      } else {
        generateurl.innerText = baseSite + '?v=' + encodeURIComponent(inputVideo.value) + '&i=' + encodeURIComponent(inputImage.value);
      }
    };

    inputVideo.addEventListener('change', checkChange);
    inputImage.addEventListener('change', checkChange);
    inputVideo.addEventListener('keyup', checkChange);
    inputImage.addEventListener('keyup', checkChange);
    checkChange()
  </script>
</body>
</html>
