Browse Source

Adding documentation for every component in the demos using separate markdown files.

master
Zed A. Shaw 3 weeks ago
parent
commit
b3ac5be72b
  1. 16
      client/bando/demos/FairPay.svelte.md
  2. 13
      client/bando/demos/Flipper.svelte.md
  3. 2
      client/bando/demos/Form.svelte
  4. 10
      client/bando/demos/Form.svelte.md
  5. 7
      client/bando/demos/LiveStream.svelte
  6. 5
      client/bando/demos/LiveStream.svelte.md
  7. 17
      client/bando/demos/LoggedIn.svelte
  8. 16
      client/bando/demos/LoggedIn.svelte.md
  9. 5
      client/bando/demos/Login.svelte.md
  10. 8
      client/bando/demos/Modal.svelte
  11. 8
      client/bando/demos/Modal.svelte.md
  12. 1
      client/bando/demos/Pagination.svelte.md
  13. 3
      client/bando/demos/PlaceHolder.svelte.md
  14. 13
      client/bando/demos/Progress.svelte.md
  15. 8
      client/bando/demos/Sidebar.svelte
  16. 6
      client/bando/demos/Sidebar.svelte.md
  17. 6
      client/bando/demos/SnapImage.svelte
  18. 29
      client/bando/demos/SnapImage.svelte.md
  19. 16
      client/bando/demos/Spinner.svelte.md
  20. 33
      client/bando/demos/StackLayer.svelte
  21. 25
      client/bando/demos/StackLayer.svelte.md
  22. 4
      client/bando/demos/Switch.svelte.md
  23. 5
      client/bando/demos/Tabs.svelte.md
  24. 2
      client/bando/demos/Tiles.svelte
  25. 1
      client/bando/demos/Tiles.svelte.md
  26. 7
      client/bando/demos/Toast.svelte
  27. 4
      client/bando/demos/Toast.svelte.md
  28. 12
      client/bando/demos/Tooltip.svelte.md
  29. 15
      client/bando/demos/Video.svelte
  30. 5
      client/bando/demos/Video.svelte.md
  31. 33
      client/bando/demos/WTVideo.svelte
  32. 24
      client/bando/demos/WTVideo.svelte.md
  33. 1
      client/components/Icon.svelte
  34. 6
      package-lock.json
  35. 2
      package.json

16
client/bando/demos/FairPay.svelte.md

@ -0,0 +1,16 @@
The FairPay component is more of a demo than an actual component. It shows how to use the
`Paypal.svelte` and `BTCPay.svelte` components. The `FairPay.svelte` implements a "pay what you
want" style of payments.
Why the $10 increments? There's a form of credit card crime called "carding" where people with
stolen numbers test their cards on any purchase that is $1. They'll get large numbers of possibly
valid credit cards and they need to test them. The best way to test them is to attempt a very small
purchase, and if the purchase works then they mark the card valid.
If you allow people to pay any amount as a donation then carders will raid your purchase form and
rack up $1 fraudulent charges. That may not seem to bad, but your payment processor will then
charge _you_ $15 or more to handle the charge back. Even if you offer to refund the purchase and
they do no work. This means if you receive $100 of fraudulent charges you would owe $1500 in fees.
The easiest way to prevent this is to simply only allow increments of $10. $10 is too high for most
carder testers, so this will deter them (at least until everyone does this).

13
client/bando/demos/Flipper.svelte.md

@ -0,0 +1,13 @@
The `Flipper` shows two panels on the front and back of and lets you "flip" them around. This is a
decent way to restrict the user interface between two options, but it will most likely have problems
with accessibility without some additional `aria` attributes.
The technique uses the `transform-style: preserve-3d` to make sure that the browser treats it like a
3D space. Then it uses `transform: rotateY(180deg)` to do the flipping action.
You finally need these two lines to maintain the back and front:
```
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
```

2
client/bando/demos/Form.svelte

@ -61,7 +61,7 @@
</FormField>
<FormField form={ form } field="subscribe" label="Want Notifications?">
<input type="checkbox" id="subscribe" name="subscribe" bind:value={ form.subscribe }>
<input type="checkbox" id="subscribe" name="subscribe" bind:checked={ form.subscribe }>
</FormField>
</middle>

10
client/bando/demos/Form.svelte.md

@ -0,0 +1,10 @@
This demonstrates how to use the `FormField` component to construct forms with nicer error messages. There are a lot of things you need to do for nice error messages on forms, and `FormField` handles most of them. You need to set variables for it, then place your input inside:
```
<FormField form={ form } field="subscribe" label="Want Notifications?">
<input type="checkbox" id="subscribe" name="subscribe" bind:checked={ form.subscribe }>
</FormField>
```
All of the input fields work mostly the same but with Svelte you need to use `bind:checked={
variable }` instead of `bind:value`.

7
client/bando/demos/LiveStream.svelte

@ -25,10 +25,3 @@
<Video poster={ stream.poster } background_color={video_background } source={ stream.source } />
</container>
<Markdown content={`
You can use the \`Video\` component to stream any HLS stream. On Apple's Safari this works natively and doesn't require any additional code. On other platforms you have to use the [HLS.js library](https://github.com/video-dev/hls.js/) in \`static/js/hls.js\` to decode and play the HLS protocol.
The \`Video\` component automatically negotiates the complex dance of figuring out when to load HLS.js.
This demo won't work without you modifying it with an HLS stream (or other stream supported by the &lt;video&gt; tag. Change the stream variable in "client/bando/demos/LiveStream.svelte" to enable one.
`}/>

5
client/bando/demos/LiveStream.svelte.md

@ -0,0 +1,5 @@
You can use the `Video` component to stream any HLS stream. On Apple's Safari this works natively and doesn't require any additional code. On other platforms you have to use the [HLS.js library](https://github.com/video-dev/hls.js/) in `static/js/hls.js` to decode and play the HLS protocol.
The `Video` component automatically negotiates the complex dance of figuring out when to load HLS.js.
This demo won't work without you modifying it with an HLS stream (or other stream supported by the `<video>` tag. Change the stream variable in `client/bando/demos/LiveStream.svelte` to enable one.

17
client/bando/demos/LoggedIn.svelte

@ -15,20 +15,3 @@
<button on:click={ () => $user.authenticated = !$user.authenticated }>Change Login</button>
<p>The LoggedIn component checks if the user is logged in by doing a GET to "/api/login" and if that API endpoint returns 401 or 403 it will perform redirects for you. It updates the <b>$user.authenticated</b> Svelte store (from <b>client/stores.js</b>) and then as your app changes that setting it will adapt and display different content.</p>
<p>Use this component to:</p>
<ol>
<li>Block a page's content from unauthenticated users.</li>
<li>Redirect users to your a new location if they are not authenticated.</li>
<li>Show a standard redirect page when it's redirecting.</li>
</ol>
<p>In this test you are simply changing the $user.authenticated to see how the LoggedIn component handles it dynamically. You should still add a check for <b>$user.authenticated</b> in your own <b>onMount</b> since svelte will run them no matter what.
</p>
<callout class="warning">
<p>
Currently you should only use LoggedIn as a major page blocking component rather than fine grained individual elements. It makes a network request to <code>/api/login</code> to confirm the user's logged in status, and if you have more than one each instance will do this check. If you see repeated calls to <code>/api/login</code> then check how your using this component on your pages.
</p>
</callout>

16
client/bando/demos/LoggedIn.svelte.md

@ -0,0 +1,16 @@
The LoggedIn component checks if the user is logged in by doing a GET to "/api/login" and if that API endpoint returns 401 or 403 it will perform redirects for you. It updates the `$user.authenticated` Svelte store (from `client/stores.js`) and then as your app changes that setting it will adapt and display different content.
Use this component to:
1. Block a page's content from unauthenticated users.
2. Redirect users to your a new location if they are not authenticated.
3. Show a standard redirect page when it's redirecting.
In this test you are simply changing the $user.authenticated to see how the LoggedIn component handles it dynamically. You should still add a check for `$user.authenticated` in your own `onMount` since svelte will run them no matter what.
<callout class="warning">
<span>
Currently you should only use LoggedIn as a major page blocking component rather than fine grained individual elements. It makes a network request to `/api/login` to confirm the user's logged in status, and if you have more than one each instance will do this check. If you see repeated calls to `/api/login` then check how your using this component on your pages.
</span>
</callout>

5
client/bando/demos/Login.svelte.md

@ -0,0 +1,5 @@
The `Login` is both in `client/pages/Login.svelte` and also in `client/components/Login.svelte`. The
one in `pages` is more like this demo and simply uses the `component`. The reason for the split is
so you can prompt for a login with a `Modal` in situations where tearing the user away from what
they're viewing might be wrong. A good example of this is if people are watching a video but need
to log in to comment or chat.

8
client/bando/demos/Modal.svelte

@ -27,10 +27,6 @@
</test-panel>
</Modal>
{:else}
<p>The Modal component is useful for short notices or UI elements when you don't want to
remove the user from a view they need to continue seeing. A good example usage is logging in
while they watch a video. Transitioning to an entirely new page just to ask for username/password
ruins their video viewing experience.
</p>
<button on:click={ () => modal_open = true }>OPEN MODAL</button>
<button on:click={ () => modal_open = true }>OPEN MODAL</button>
{/if}

8
client/bando/demos/Modal.svelte.md

@ -0,0 +1,8 @@
The `Modal` component is useful for short notices or UI elements when you don't want to remove the
user from a view they need to continue seeing. A good example usage is logging in while they watch
a video. Transitioning to an entirely new page just to ask for username/password ruins their video
viewing experience.
Try changing this `client/bando/demos/Model.svelte` file to not use the `{#if}` when the model
opens. You'll see that the button to open the modal stays around until you hover off. Just a quirk
of how the modal is layered and probably fixed with `z-index` if you run into it.

1
client/bando/demos/Pagination.svelte.md

@ -0,0 +1 @@
A reasonably complete `Pagination` system that will work with the [knex-paginate by felixmosh](https://github.com/felixmosh/knex-paginate) module. It tries to replicate the behavior of pagination system found on many websites that abreviates the pages when you reach the middle but still allow for jumping to the first or last.

3
client/bando/demos/PlaceHolder.svelte.md

@ -0,0 +1,3 @@
The `PlaceHolder` is a simple JavaScript generated placeholder image for when you're starting your
design. I prefer the `ImageIcon` instead of this one since it gives a better start and feedback on
the design.

13
client/bando/demos/Progress.svelte.md

@ -0,0 +1,13 @@
The `Progress` demo uses either the standard tags found in browsers, or the
`client/components/Progress.svelte` component if you want a simple custom progress meter.
Your OS (or browser) should have native controls for progress, but there are two HTML tags
available:
1. `<progress>` -- It shows a ... progress.
2. `<mete>` -- It shows a ... meter which is apparently...totally different?
Go with whatever works for you, and if you want to altern the look then use the `<Progress/>` tag.
In the `static/global.css` file this is listed as a `<progress-meter>` tag to void conflicts with
`<progress>` or `<meter>`.

8
client/bando/demos/Sidebar.svelte

@ -8,14 +8,6 @@
{title: "Countdown", active: false, icon: "clock"},
{title: "Darkmode", active: false, icon: "sunrise"},
{title: "Form", active: false, icon: "database"},
{title: "Icon", active: false, icon: "feather"},
{title: "Login", active: false, icon: "log-in"},
{title: "Modal", active: false, icon: "maximize"},
{title: "Panels", active: false, icon: "columns"},
{title: "SnapImage", active: false, icon: "camera"},
{title: "Spinner", active: false, icon: "rotate-cw"},
{title: "Tabs", active: false, icon: "folder"},
{title: "Tiles", active: false, icon: "camera"},
{title: "Video", active: false, icon: "video"},
{title: "Sidebar", active: false, icon: "sidebar"},
];

6
client/bando/demos/Sidebar.svelte.md

@ -0,0 +1,6 @@
This `Sidebar` is a very simple version of the ones you find online. It doesn't support nested
accordion style structures and only a simple list of Icon+Title elements.
Look in `client/bando/Components.svelte` to see a real use of the sidebar to load components
dynamically. It uses `<svelte:component>` to render the chosen component, which comes up quite
often in applications.

6
client/bando/demos/SnapImage.svelte

@ -3,14 +3,14 @@
const image = "https://zedshaw.games/thumbs/valheim/thumb0025.jpeg";
let source = "";
const colors = [[44,77,26],[127,187,60],[189,160,115],[88,153,44],[25,31,14],[124,151,61],[89,115,43],[65,122,34],[108,149,173],[89,119,109]];
const colors = [[44, 77, 26], [127, 187, 60], [189, 160, 115], [88, 153, 44], [25, 31, 14], [124, 151, 61], [89, 115, 43], [65, 122, 34], [108, 149, 173], [89, 119, 109]];
</script>
<SnapImage width="1600" height="800" colors={ colors } src={ source } />
<br />
<button on:click={ () => source = image }>Click to Load</button>
<p>The SnapImage generates an SVG from colors extracted from the image and injects that before the full image loads. It blurs this randomized color pre-loading image and when the real image is loaded it swaps the colors out for the loaded image. Normally you wouldn't have a delay like this, but the button <button on:click={ () => source = image }>Click to Load</button> is here so you can see how the loading works.
</p>

29
client/bando/demos/SnapImage.svelte.md

@ -0,0 +1,29 @@
`SnapImage` creates a temporary image using SVG that looks _kind of_ like the incoming image, and
when that image finally loads fades it into view. This helps with _perceived_ render speed in the
following ways:
1. The aspect ratio of the image is placed before the page loads, reducing or eliminating render shift.
2. A block of responsive SVG loads instantly which tricks the browser into fully rendering the whole page making it seem faster.
3. The rendered colors look enough like the image for the brief time they're present that people percieve the image as loading faster even when it's not.
By default `SnapImage` will use a set of random monochrome colors if none are given. You can change the options used to generate the random colors by setting `random_options` like this:
```
random_options = {
hue: "monochrome",
"format": "rgbArray",
"luminosity": "random",
count: 10
}
```
These options come from the [randomColor project by davidmerfield](https://github.com/davidmerfield/randomColor) which is used in the project for all random color generation.
Generating Image Colors
===
To generate your own colors there's a tiny script I'm using:
<callout class="warning">
<span>I need to find this code actually. Stay tuned.</span>
</callout>

16
client/bando/demos/Spinner.svelte.md

@ -0,0 +1,16 @@
The internet is slow, but Google says your website should be fast. Google can't meet their own
standards but that doesn't matter. All that matters is there's now a cost added to creating a
website because Google will punish _your_ content for loading slowly while _their_ content (and the
content of their buddies) can load slowly.
The Spinner helps tell users that a page is loading and it's typically used with `{#await}` and the
`client/helpers.js:defer()` function.
<callout class="warning">
<span>Find or create examples in the project for how to do this.
</span>
</callout>
Adding an `aspect_ratio` also helps you with page load speed because the page renders, it has less
layout shift, and there's a notification that it's done. Best of all the spinning is done in CSS
which doesn't count toward "execution" in Lighthouse.

33
client/bando/demos/StackLayer.svelte

@ -2,11 +2,6 @@
let first_top = true;
</script>
<h2>Stack/Layers</h2>
<p>Layers with different opacity are a staple of digital compositing systems but weirdly CSS is terrible at it. The stack/layer CSS in <code>static/global.csS</code> implements a simple method using <code>display: grid</code> to place elements into a single cell. The CSS grid system will then correctly layer each element in a stack. The elements also are set to <code>position:relative</code> so you can change their <code>z-index</code> to shuffle them around. Alternatively, you can simply set one of the children to <code>class="top"</code> and that one element will be on top.
</p>
<style>
display {
width: 100%;
@ -30,6 +25,8 @@
}
</style>
<h2>Stack/Layers</h2>
<display class="stacked" style="--aspect-ratio: 10/3;">
<first class="layer" class:top={ first_top }>
<h1>I Am On Top</h1>
@ -38,31 +35,7 @@
<h1>I Am On Bottom</h1>
</second>
</display>
<br/>
<button on:click={() => first_top = !first_top}>Swap Layers</button>
<p>If you don't set a <code>background-color</code> color then the layers will be transparent. You can also use <code>opacity</code> to hide or fade the layers in the stack.
</p>
<p>The CSS that is making this work is below (but look in <code>static/global.css</code> to confirm it's still done this way.</p>
<pre>
<code>
.stacked &lbrace;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: "cover";
}
.stacked .layer &lbrace;
width: 100%;
position: relative;
grid-area: cover;
}
.stacked .top &lbrace;
z-index: 10;
}
</code>
</pre>

25
client/bando/demos/StackLayer.svelte.md

@ -0,0 +1,25 @@
Layers with different opacity are a staple of digital compositing systems but weirdly CSS is terrible at it. The stack/layer CSS in `static/global.csS` implements a simple method using `display: grid` to place elements into a single cell. The CSS grid system will then correctly layer each element in a stack. The elements also are set to `position:relative` so you can change their `z-index` to shuffle them around. Alternatively, you can simply set one of the children to `class="top"` and that one element will be on top.
If you don't set a `background-color` color then the layers will be transparent. You can also use `opacity` to hide or fade the layers in the stack.
The CSS that is making this work is below (but look in `static/global.css` to confirm it's still done this way.
```
.stacked &lbrace;
display: grid;
grid-template-rows: 1fr;
grid-template-columns: 1fr;
grid-template-areas: "cover";
}
.stacked .layer &lbrace;
width: 100%;
position: relative;
grid-area: cover;
}
.stacked .top &lbrace;
z-index: 10;
}
```

4
client/bando/demos/Switch.svelte.md

@ -0,0 +1,4 @@
I generally think you shouldn't use this `Switch` as it's probably not going to work with screen
readers and will mostly just confuse users. I have it here as a demonstration of _how_ to alter an
element by _hiding_ it, but using its state to change the CSS of another element. This is a deep
CSS trick, which I hope you won't really need that often.

5
client/bando/demos/Tabs.svelte.md

@ -0,0 +1,5 @@
`Tabs` give you the common tabbed layout found in many applications for decades. The `Accordion`
demo just uses the `Tab` component with `vertical={true}`. It needs other Svelte components to
place into the tab panels, but it's implemented mostly in CSS. That means if you need to do a
different presentatino or can't use components for the panels then you can use the `<tab>` from
`static/global.css`.

2
client/bando/demos/Tiles.svelte

@ -30,5 +30,3 @@
</tile>
</content>
<p>This is a CSS only component that simply provides a classic "tile" layout. A tile seems to be organized with a left side that has an image/icon, a middle with content, and a right with buttons or other things. You don't need Svelte to make this work, and actually trying to use Svelte ends up making it more complex than just using CSS. To see how you use this just look in <b>client/bando/demos/Tiles.svelte</b>.
</p>

1
client/bando/demos/Tiles.svelte.md

@ -0,0 +1 @@
This is a CSS only component that simply provides a classic "tile" layout. A tile seems to be organized with a left side that has an image/icon, a middle with content, and a right with buttons or other things. You don't need Svelte to make this work, and actually trying to use Svelte ends up making it more complex than just using CSS. To see how you use this just look in `client/bando/demos/Tiles.svelte`.

7
client/bando/demos/Toast.svelte

@ -1,14 +1,14 @@
<script>
import Icon from "$/client/components/Icon.svelte";
import { fade } from "svelte/transition";
let bottom=false;
let bottom=true;
let top=false;
let right=false;
let right=true;
let left=false;
let active=true;
let reverse = false;
let toasts = [ "Toast 1" ];
let toasts = ["Toast 1"];
const add_toast = () => {
toasts.push(`Toast ${toasts.length + 1}`);
@ -24,7 +24,6 @@
<span on:click={ () => reverse = !reverse }><Icon name={ reverse ? "chevrons-up" : "chevrons-down" } size="48" /></span>
<p>A toast is a little pop-up that slides or fades in from the edge of the screen. It's used to notify of events without getting in the way of the UI. Use the arrow buttons to change the location of the <b>toast-list</b> and the plus to add more toasts. Use the chevrons to change the direction toasts are filled in.</p>
<toast-list class:bottom class:top
class:left class:right class:active class:reverse>

4
client/bando/demos/Toast.svelte.md

@ -0,0 +1,4 @@
A toast is a little pop-up that slides or fades in from the edge of the screen. It's used to notify of events without getting in the way of the UI. Use the arrow buttons to change the location of the `toast-list` and the plus to add more toasts. Use the chevrons to change the direction toasts are filled in.
This demo starts with the toasts in the most common position on the bottom-right. You can use the
arrows to test out different combinations and then hit _+_ to add random toasts.

12
client/bando/demos/Tooltip.svelte.md

@ -0,0 +1,12 @@
`Tooltip` simply displays a little overlay message on a component. It's best to not use this too
much as it can clutter your UI significantly. Try to find a way to not need the tooltip.
You can put a tooltip on a word using:
```
<word>tooltip word test<tooltip>I hover</tooltip></word>
```
Which works like this:
<word>tooltip word test<tooltip>I hover</tooltip></word>

15
client/bando/demos/Video.svelte

@ -1,23 +1,12 @@
<script>
import Video from "$/client/components/Video.svelte";
import Markdown from "$/client/components/Markdown.svelte";
let source = "/videos/TNT_1_Calibrate_Your_Lights.720.mp4";
let poster = "/video_stills/TNT_1_Calibrate_Your_Lights.jpg";
let video_background = "rgba(0,0,0,0)";
</script>
<h1>Video</h1>
<container class="pattern-lines-sm">
<Video poster={ poster } background_color={video_background } source={ source } starts_on={ new Date(Date.now() + 10000) } />
<Markdown content={`
Video
===
The \`Video\` component can handle both static video downloads and streaming using HLS. On platforms that support HLS video it will use the native \`<video>\` tag, but if the platform doesn't support it then it will fall back to [HLS.js](https://github.com/video-dev/hls.js/). Internally it uses the \`client/fsm.js\` code to keep everything straight while it juggles all the byzantine errors you have with videos.
Most of the options exported by \`Video.svelte\` make sense but the \`aspect_ratio\` setting is probably one you'll want to adjust if your videos aren't 16:9. This setting uses the CSS in \`static/globa.css\` that uses \`--aspect-ratio\` to make sure the container holding the video stays at the correct aspect ratio. Without this setting the video's container will do weird things at different screen sizes.
This demo also shows how the countdown timer works with \`starts_on\` which is useful for live streaming situations where shows start at specific times.
`}/>
</container>

5
client/bando/demos/Video.svelte.md

@ -0,0 +1,5 @@
The `Video` component can handle both static video downloads and streaming using HLS. On platforms that support HLS video it will use the native `<video>` tag, but if the platform doesn't support it then it will fall back to [HLS.js](https://github.com/video-dev/hls.js/). Internally it uses the `client/fsm.js` code to keep everything straight while it juggles all the byzantine errors you have with videos.
Most of the options exported by `Video.svelte` make sense but the `aspect_ratio` setting is probably one you'll want to adjust if your videos aren't 16:9. This setting uses the CSS in `static/global.css` that uses `--aspect-ratio` to make sure the container holding the video stays at the correct aspect ratio. Without this setting the video's container will do weird things at different screen sizes.
This demo also shows how the countdown timer works with `starts_on` which is useful for live streaming situations where shows start at specific times.

33
client/bando/demos/WTVideo.svelte

@ -1,6 +1,5 @@
<script>
import WTVideo from "$/client/components/WTVideo.svelte";
import Markdown from "$/client/components/Markdown.svelte";
let media = {
"src": "/videos/sample.mp4",
@ -18,38 +17,8 @@
margin-right: 0.5rem;
}
</style>
<h1>WebTorrent Video</h1>
<container class="pattern-lines-sm">
<WTVideo media={ media } download={ true }/>
</container>
<Markdown content={`
WebTorrent Video
===
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.
This will most likely *only* work if you have your server on \`localhost:5001\` 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:
\`\`\`
sh scripts/mktorrents.sh sample.mp4
\`\`\`
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:
* \`-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.
* \`-w localhost:5001\` -- 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.
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.
`}/>

24
client/bando/demos/WTVideo.svelte.md

@ -0,0 +1,24 @@
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.
This will most likely *only* work if you have your server on `localhost:5001` 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:
```
sh scripts/mktorrents.sh sample.mp4
```
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:
* `-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.
* `-w localhost:5001` -- 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.
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.

1
client/components/Icon.svelte

@ -15,7 +15,6 @@ export let shadow=false;
<style>
.inactive {
stroke: var(--color-inactive);
fill: var(--color-inactive-secondary);
}
.shadow {

6
package-lock.json

@ -6606,9 +6606,9 @@
}
},
"knex-paginate": {
"version": "2.1.0",
"resolved": "https://registry.npmjs.org/knex-paginate/-/knex-paginate-2.1.0.tgz",
"integrity": "sha512-caC958zXTXX9BneQ8hrZroWFO9OVU7oz+YuzPBQJNAEjaKZ3QciJdgMHgszhAADtD2XrJio+lOIYQKfG38oS1w=="
"version": "2.3.0",
"resolved": "https://registry.npmjs.org/knex-paginate/-/knex-paginate-2.3.0.tgz",
"integrity": "sha512-P/ysU+gs7GsUxuCRSSrixAL9CVgOMEf0iOFG2gsa9osaeXLJ0/6aB7pFHlbI77LATm5xuT1Zm8xrQjCquS93vg=="
},
"known-css-properties": {
"version": "0.21.0",

2
package.json

@ -85,7 +85,7 @@
"express-session": "^1.17.1",
"faker": "^5.5.3",
"knex": "^0.95.4",
"knex-paginate": "^2.1.0",
"knex-paginate": "^2.3.0",
"marked": "^2.1.3",
"memorystore": "^1.6.6",
"morgan": "^1.10.0",

Loading…
Cancel
Save