Fix up the video demos so they work on the main site, and also give people instructions for getting them working locally.

admin/bando/demos/HLSVideo.svelte

@@ -1,10 +1,22 @@
 <script>
   import HLSVideo from "$/client/components/HLSVideo.svelte";
-  let source = "https://learnjsthehardway.com/media/sample_video.mp4";
+  import Icon from "$/client/components/Icon.svelte";
-  let poster = "https://learnjsthehardway.com/media/sample_image.jpg";
+  let source = "/images/sample_video.mp4";
+  let poster = "/images/sample_image.jpg";
   let video_background = "rgba(0,0,0,0)";
 </script>
 
 <container class="pattern-lines-sm">
 <HLSVideo poster={ poster } background_color={video_background } source={ source } starts_on={ new Date(Date.now() + 10000) } />
 </container>
+
+<h1>Instructions</h1>
+
+<p>To get this demo to work you should get the
+<a href="/client/#/bando/components/WTVideo/">WTVideo</a> demo working.
+This demo will have you create a sample image and sample video that
+the <code>HLSVideo</code> uses as well.  If you don't have access to
+the <code>mktorrent</code> command mentioned in the
+<a href="/client/#/bando/components/WTVideo/">WTVideo</a> demo then
+just skip that part and as long as you have the samples in place
+the <code>HLSVideo</code> demo will work.  </p>

admin/bando/demos/Video.svelte

@@ -1,7 +1,8 @@
 <script>
   import Video from "$/client/components/Video.svelte";
-  let source = "https://learnjsthehardway.com/media/sample_video.mp4";
+  import Icon from "$/client/components/Icon.svelte";
-  let poster = "https://learnjsthehardway.com/media/sample_image.jpg";
+  let source = "/images/sample_video.mp4";
+  let poster = "/images/sample_image.jpg";
   let video_background = "rgb(0,0,0)";
 </script>
 
@@ -14,3 +15,10 @@
 <container style="--aspect-ratio: 16/9;">
 <Video poster={ poster } background_color={video_background } source={ source } />
 </container>
+
+<h1>Instructions</h1>
+
+<p>Just like with the <code>HLSVideo</code> component,
+you should get the <a href="/client/#/bando/components/WTVideo/">WTVideo</a>
+demo working to get the sample files setup
+correctly.  After that this demo will work too.</p>

admin/bando/demos/WTVideo.svelte

@@ -1,12 +1,13 @@
 <script>
   import WTVideo from "$/client/components/WTVideo.svelte";
+  import Icon from "$/client/components/Icon.svelte";
 
   let media = {
-    "src": "https://learnjsthehardway.com/media/sample_video.mp4",
+    "src": "/images/sample_video.mp4",
-    "filename": "sample.mp4",
+    "filename": "sample_video.mp4",
-    "poster": "https://learnjsthehardway.com/media/sample_image.jpg",
+    "poster": "/images/sample_image.jpg",
     "preload": "none",
-    "torrent_url": "https://learnjsthehardway.com/media/sample_video.mp4.torrent"
+    "torrent_url": "/images/sample_video.mp4.torrent"
   }
 </script>
 
@@ -21,3 +22,14 @@
 <container class="pattern-lines-sm">
 <WTVideo media={ media } />
 </container>
+
+<h1>Instructions</h1>
+
+<p>Read the <Icon name="book-open" /> Docs panel for instructions
+  on how to get this demo to work on your local computer.</p>
+
+<h1>Bugs</h1>
+
+<p>The video downloads, but WebTorrent seems to lose track of the last
+chunk. Not sure why but if you know then message me.
+</p>

admin/bando/demos/WTVideo.svelte.md

@@ -2,23 +2,43 @@ The [WebTorrent](https://webtorrent.io) project provides a way for websites to
 share the bandwidth load with the users viewing content. It works on almost any
 content, but the first thing I I implemented is for Video.
 
+# Getting Media
+
+This demo is found in `admin/bando/demos/WTVideos.svelte` and it is coded to expect a sample image, video and torrent file at:
+
+* `/images/sample_video.mp4`
+* `/images/sample_image.jpg`
+* `/images/sample_video.mp4.torrent`
+
+If you want it to work locally, grab a video and an image and place them there, then use `mktorrent` as described next.
+
+# Making the .torrent
+
 This will most likely *only* work if you have your server on `127.0.0.1` since the torrent file is configured for that.  Also, the default `npm run dev` will run the simple tracker implementation found in `services/tracker.js`.  If you want to generate the torrents again then run:
 
-```
+```shell
-sh scripts/mktorrents.sh sample.mp4
+mktorrent -v -w http://127.0.0.1:5001/images/sample_video.mp4 \
+  -a ws://127.0.0.1:9001/ \
+  -o static/images/sample_video.mp4.torrent \
+  -p -l 18 static/images/sample_video.mp4
+cp -r static/images public/images
 ```
 
-It uses the [mktorrents](https://github.com/pobrn/mktorrent) to generate the torrent since it is faster.  Be careful of the WebTorrent specific options I use in the ``services/mktorrents.sh`` that are needed for WebTorrent to understand the torrent:
+It uses the [mktorrent](https://github.com/pobrn/mktorrent) to generate the torrent since it is faster.  Be careful of the WebTorrent specific options I use in the `mktorrent` that are needed for WebTorrent to understand the torrent:
 
 * `-p` -- Sets the private flag.  This isn't needed for WebTorrent but is
   needed if you want to add extra protections to people accessing your content
   only after they log in.
-* `-l 15` -- Sets the piece length to 15.
+* `-l 18` -- Sets the piece length to 18, which is what WebTorrent seems to need.
 * `-w 127.0.0.1` -- Sets an initial web URL to use as a source.  You
   should remove this if you want them to only go through the tracker and other
   users.
+* `-a ws://127.0.0.1:9001/` -- Tells WebTorrent where the tracker is located.
+
+# Bugs
+
+1. It looks like WebTorrent has a problem getting the last chunk in some situations and I'm quite sure why.  If you have an idea let me know.
 
-Download Link
+# Download Link
-===
 
-If you want to let people download the video then add the `download={ true }` property.  This demo sets that option so you can see how it works.
+If you want to let people download the video then add the `download={ true }` property.

client/wt.js

@@ -232,7 +232,12 @@ export const fetch_torrent_file = async (media) => {
   assert(media, "media can't be undefined");
   assert(media.torrent_url, "media does not have torrent_url set");
 
+  // kind of a hack to work with media models for now
+  if(media.torrent_url.startsWith("http")) {
+    media.full_torrent_url = `${media.torrent_url}`;
+  } else {
     media.full_torrent_url = `${base_host}${media.torrent_url}`;
+  }
 
   let res = await fetch(media.full_torrent_url, { credentials: "same-origin" });