Browse Source

WT is working but now need to refine it for Svelte more.

pull/23/head
Zed A. Shaw 1 month ago
parent
commit
e18f1ad71b
20 changed files with 83 additions and 70 deletions
  1. +1
    -1
      db/live/streams/20200417-html-basics-tags.md
  2. +5
    -1
      db/modules/drawing_basics/exercises/01-sight-sized.md
  3. +1
    -1
      db/modules/html_basics/exercises/01-intro.md
  4. +1
    -1
      lib/api.js
  5. +1
    -1
      package.json
  6. +43
    -6
      src/components/Video.svelte
  7. +1
    -1
      src/node_modules/api.js
  8. +4
    -42
      src/node_modules/media.js
  9. +2
    -2
      src/routes/_layout.svelte
  10. +1
    -1
      src/routes/live/[stream].svelte
  11. +4
    -5
      src/routes/modules/[slug]/[exercise].svelte
  12. +1
    -1
      static/feed.atom
  13. +1
    -1
      static/feed.rss
  14. +1
    -1
      tests/ui/blog.spec.js
  15. +1
    -1
      tests/ui/live.spec.js
  16. +1
    -1
      tests/ui/login.spec.js
  17. +1
    -1
      tests/ui/modules.spec.js
  18. +1
    -1
      tests/ui/phones.spec.js
  19. +1
    -1
      tests/ui/register.spec.js
  20. +11
    -0
      tools/mktorrents.sh

+ 1
- 1
db/live/streams/20200417-html-basics-tags.md View File

@@ -2,7 +2,7 @@
"author": "Zed A. Shaw",
"date": "Apr 17, 2020 14:00:00 EST",
"id": "20200420",
"state": "pending",
"state": "published",
"summary": "Introduction to HTML tags.",
"video": {
"src": "/media/videos/html_basics/HTML_Basics_Ex01_Tags.webm",

+ 5
- 1
db/modules/drawing_basics/exercises/01-sight-sized.md View File

@@ -10,7 +10,11 @@
"video": {
"src": "/media/videos/drawing_basics/Drawing_Basics_01_Sight_Sized.webm",
"poster": "/media/slides/drawing_basics/01-sight-sized/drawing_basics_1_sight_sized_2.svg",
"preload": "none"
"preload": "none",
"torrent": {
"target": "68ee97fadab648dbad38be454c29a6fe",
"torrent_url": "http://localhost:7778/media/torrents/drawing_basics/Drawing_Basics_01_Sight_Sized.torrent"
}
}
}


+ 1
- 1
db/modules/html_basics/exercises/01-intro.md View File

@@ -8,7 +8,7 @@
"video": {
"src": "/media/videos/html_basics/HTML_Basics_Ex01_Tags.webm",
"poster": "/media/slides/html_basics/01-intro/Ex01_Tags_1.svg",
"preload": "none"
"preload": "none"
},
"summary": "This will first introduce some basic terminology for HTML."
}

+ 1
- 1
lib/api.js View File

@@ -1,6 +1,6 @@
// TODO: gotta resolve this module .js vs common js thing

const base = 'http://localhost:3000';
const base = 'http://localhost:7778';

const send = ({ method, path, data, token }) => {
const fetch = process.browser ? window.fetch : require('node-fetch').default;

+ 1
- 1
package.json View File

@@ -3,7 +3,7 @@
"description": "TODO",
"version": "0.0.1",
"scripts": {
"dev": "sapper dev",
"dev": "sapper dev -p 7778",
"build": "sapper build --legacy -p 7778",
"export": "sapper export --legacy -p 7778",
"start": "node __sapper__/build",

+ 43
- 6
src/components/Video.svelte View File

@@ -1,8 +1,45 @@
<svelte:head>
<script onload="window.wt_ready = true" src="/js/webtorrent.min.js"></script>
</svelte:head>
<script>
export let options = {};
import { loadMedia, removeMedia } from 'media';
import { onMount, onDestroy } from 'svelte';

export let media;

if(media.torrent) {
onDestroy(() => removeMedia(media.torrent));

// incredibly stupid hack because WebTorrent is slow to load sometimes because it's huge
onMount(() => {
if(!window.wt_ready) {
let intervalId = setInterval(() => {
console.log("WT", window.wt_ready);
if(window.wt_ready) {
clearInterval(intervalId);
loadMedia(media.torrent);
}
}, 200);
} else {
console.log("READY");
loadMedia(media.torrent);
}
});
}
</script>
<video controls class="video-responsive"
src="{options.src}"
poster="{options.poster}"
preload="{options.preload}">
</video>

<style lang="scss">

</style>

{#if media.torrent }
<video id="append-{media.torrent.target}" poster="{media.poster}" preload="{media.prelod}" class="video-responsive"></video>
<div id="download-{media.torrent.target}"></div>
{:else}
<video controls class="video-responsive"
src="{media.src}"
poster="{media.poster}"
preload="{media.preload}">
</video>
{/if}


+ 1
- 1
src/node_modules/api.js View File

@@ -1,4 +1,4 @@
const base = 'https://localhost:3000/';
const base = 'https://localhost:7778/';

function send({ method, path, data, token }) {
const fetch = process.browser ? window.fetch : require('node-fetch').default;

+ 4
- 42
src/node_modules/media.js View File

@@ -1,31 +1,5 @@
const seedTimeout = 60000;

export class Media {
constructor(target, torrent_url) {
this.target = target;
// torrent_url should be enough
this.torrent_url = torrent_url;
// the webtorrent object
this.torrent = null;
// the infohash that webtorrent generates
this.info_hash = "";
// how much has been downloaded
this.progress = "0%";
// number of bytes downloaded
this.bytes = 0;
// the image that's displayed before download
this.cover_image = `/images/400/${target}.jpg`;
// if the viewing modal is open
this.viewing = false;
// what kind of media, image, video, audio
this.kind = 'image';
this.metadata = {};
this.blob_url = null;
this.modal = null;
this.file_name = "";
}
}

// WARNING: having svelte build the webtorrent client into the script makes it slow to load and massive.
// it's much faster to set it as a script variable in the index.html but that might cause loading problems
// WebTorrent then comes from the public/index.html file, not from an import in here
@@ -54,7 +28,7 @@ const getClient = () => {
}
}

const handle_torrent = (media, torrent) => {
const handle_torrent = (media, torrent, events) => {
let download = torrent.download_button;

torrent.files.forEach((file) => {
@@ -66,13 +40,12 @@ const handle_torrent = (media, torrent) => {
console.log("FILE NAME", media.file_name);
if(media.file_name.endsWith('mp4') || media.file_name.endsWith('webm')) {
media.kind = 'video';
// TODO: what did this do? document.getElementById(mediaId).remove();
file.renderTo('#' + appendId, {autoplay: false, controls: true, muted: false});
} else if(media.file_name.endsWith('mp3')) {
// temporarily just say it's video
media.kind = 'audio';
document.getElementById(mediaId).remove();
file.renderTo('#' + appendId, {autoplay: true, controls: true, muted: true});
file.renderTo('#' + appendId, {autoplay: false, controls: true, muted: true});
} else {
// BUG: This seems to fail.
file.renderTo('#' + mediaId, (err, elem) => {
@@ -82,15 +55,6 @@ const handle_torrent = (media, torrent) => {
setTimeout(() => client.remove(torrent.infoHash), seedTimeout);
});
}

file.getBlobURL((err, url) => {
// this is where we'd update the download button
media.blob_url = url;
download.href = url;
download.removeAttribute('disabled');
});

// we can also write into a media object
});

// need to clear the timer when we're done
@@ -102,11 +66,9 @@ const handle_torrent = (media, torrent) => {
torrent.on('error', msg => console.log('error', msg));
torrent.on('download', bytes => {
// we get the bytes but just use this to update the download progress instead
media.progress = `${(torrent.progress * 100).toFixed(1)}%`;
media.progress = `${(torrent.progress * 100).toFixed(1)}% progress from ${torrent.numPeers} peers.`;
media.bytes = bytes;
if(download) {
download.innerHTML = `${media.progress} Done`;
}
download.innerHTML = `${media.progress}`;
});
torrent.on('upload', bytes => console.log('upload', bytes));


+ 2
- 2
src/routes/_layout.svelte View File

@@ -17,7 +17,7 @@
min-width: 340px;
}

#content {
#main_content {
flex-grow: 1;
}

@@ -31,7 +31,7 @@
</div>
</div>

<div class="container full-width" id="content">
<div class="container full-width" id="main_content">
<div class="columns">
<div class="column col-mx-auto">
<slot></slot>

+ 1
- 1
src/routes/live/[stream].svelte View File

@@ -148,7 +148,7 @@
</div>
</div>
{:else if metadata.state === "published"}
<Video options={metadata.video} />
<Video media={metadata.video} />
{/if}
</div>
</div>

+ 4
- 5
src/routes/modules/[slug]/[exercise].svelte View File

@@ -5,7 +5,6 @@

<script context="module">
import docs from 'docs';
import Video from '../../../components/Video.svelte';
import { slide } from 'svelte/transition';

export async function preload({ params, query }) {
@@ -24,9 +23,11 @@
</script>

<script>
import Video from '../../../components/Video.svelte';
import Icon from '../../../components/Icon.svelte';
import Comments from '../../../components/Comments.svelte';
import Sidebar from '../../../components/Sidebar.svelte';

export let content;
export let toc;
export let metadata;
@@ -95,16 +96,14 @@

<div class="divider text-center"></div>
<div class="container">
{#if metadata.video }
<div class="columns">
<div class="column" id="video">
<Video options={metadata.video} />
<Video media={metadata.video} />
</div>
</div>
<div class="divider text-center"></div>
{/if}

<Comments link_id="questions" title="Questions" />
</div>
</div>
</Sidebar>

+ 1
- 1
static/feed.atom View File

@@ -2,7 +2,7 @@
<feed xmlns="http://www.w3.org/2005/Atom">
<id>https://learnjsthehardway.com/</id>
<title>Learn JavaScript the Hard Way</title>
<updated>2020-04-22T00:32:08.138Z</updated>
<updated>2020-04-25T13:45:21.292Z</updated>
<generator>LJSTHW Custom Generator</generator>
<author>
<name>Zed A. Shaw</name>

+ 1
- 1
static/feed.rss View File

@@ -4,7 +4,7 @@
<title>Learn JavaScript the Hard Way</title>
<link>https://learnjsthehardway.com/</link>
<description>The blog for the Learn JavaScript the Hard Way course.</description>
<lastBuildDate>Wed, 22 Apr 2020 00:32:08 GMT</lastBuildDate>
<lastBuildDate>Sat, 25 Apr 2020 13:45:21 GMT</lastBuildDate>
<docs>https://validator.w3.org/feed/docs/rss2.html</docs>
<generator>LJSTHW Custom Generator</generator>
<language>en</language>

+ 1
- 1
tests/ui/blog.spec.js View File

@@ -3,7 +3,7 @@ const t = require('@lib/testing');

const main_user = t.fake_person();

const host = 'http://localhost:3000/';
const host = 'http://localhost:7778/';

afterAll(() => t.close());


+ 1
- 1
tests/ui/live.spec.js View File

@@ -1,6 +1,6 @@
const t = require('@lib/testing');

const host = 'http://localhost:3000/live';
const host = 'http://localhost:7778/live';

afterAll(() => {
t.close()

+ 1
- 1
tests/ui/login.spec.js View File

@@ -4,7 +4,7 @@ const { User, Auth, knex} = require('@lib/models');

const main_user = t.fake_person();

const host = 'http://localhost:3000/';
const host = 'http://localhost:7778/';

afterAll(async () => {
t.close()

+ 1
- 1
tests/ui/modules.spec.js View File

@@ -3,7 +3,7 @@ const {User, Auth, knex} = require('@lib/models');

const main_user = t.fake_person();

const host = 'http://localhost:3000/';
const host = 'http://localhost:7778/';

afterAll(async () => {
t.close();

+ 1
- 1
tests/ui/phones.spec.js View File

@@ -1,5 +1,5 @@
const t = require('@lib/testing');
const host = 'http://localhost:3000';
const host = 'http://localhost:7778';

it("iPhoneX doesn't look terrible.", async () => {
t.device_check(host, 'iPhone X');

+ 1
- 1
tests/ui/register.spec.js View File

@@ -4,7 +4,7 @@ const {User, Auth, knex} = require('@lib/models');

const main_user = t.fake_person();

const host = 'http://localhost:3000/';
const host = 'http://localhost:7778/';

afterAll(() => {
t.close();

+ 11
- 0
tools/mktorrents.sh View File

@@ -0,0 +1,11 @@
#!/usr/bin/env bash
set -euo pipefail

SRC=$1
TARGET_DIR=$2
TORRENT=${SRC%%.*}.torrent
WEB=http://localhost:7778/media/videos/drawing_basics/${SRC}

rm -f "protected/media/torrents/${TARGET_DIR}/${TORRENT}"
mktorrent -v -o "protected/media/torrents/${TARGET_DIR}/${TORRENT}" -w ${WEB} -p -l 15 "protected/media/videos/${TARGET_DIR}/${SRC}"


Loading…
Cancel
Save