Using a plain old template generator to make the webtorrent player files so they're as small and simple as possible.

master
Zed A. Shaw 5 months ago
parent abc0e273dc
commit 26cf84511d
  1. 34
      commands/gen_players.js
  2. 34
      rendered/pages/video/[slug]/player.svelte
  3. 51
      rendered/player.html

@ -0,0 +1,34 @@
import { glob, changed, exec_i } from "../lib/builderator.js";
import { knex } from "../lib/ormish.js";
import { Media } from "../lib/models.js";
import { base_host, site_name } from "../client/config.js";
import fs from "fs";
import _ from "lodash";
export const description = "Generates the bare player.html files for the Twitter cards.";
export const options = [
["--target <dirwithslash>", "directory to write files (end with /)", "./public/video/"],
["--template <filename>", "file to use for template", "rendered/player.html"]
];
export const main = async (opts) => {
const player = _.template(fs.readFileSync(opts.template));
if(!opts.target.endsWith("/")) {
console.error(`--target path must end in slash / but you have: ${ opts.target }`);
process.exit(1);
}
const all_media = await Media.all(knex.raw("title is not null"));
for(let media of all_media) {
const html = player({ base_host, site_name, media });
const outname = `${ opts.target }${ media.id }-${ media.slug }/player.html`;
console.log("PLAYER", outname);
fs.writeFileSync(outname, html);
}
process.exit(0);
}

@ -1,34 +0,0 @@
<script context="module">
import { get } from "$/rendered/pages/live/index.js";
export const getPaths = async () => {
let data = await get("/api/media");
return data.map(m => {
m.slug = `${m.id}-${m.slug}`;
return m;
});
}
export const getData = media => {
return { media }
}
</script>
<script>
import Video from "$/client/components/Video.svelte";
import { Hydrate } from '@jamcart/7ty/components';
export let media;
let video_background = "rgba(0,0,0,0)";
let video_props = {
poster: media.poster,
background_color: video_background,
source: media.src,
autoplay: false
}
</script>
<Hydrate component={ Video } props={ video_props } />

@ -0,0 +1,51 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<script type="module" src="/js/webtorrent.js">
</script>
<script type="module">
const wt_opts = {
use_dht: false,
private: true,
tracker: true,
webSeeds: true,
maxConns: 50
}
let client = new WebTorrent(wt_opts);
function onTorrent(torrent) {
console.log(torrent.files);
const file = torrent.files[0];
file.renderTo("#video-player");
}
client.add("${base_host}${media.torrent_url}", onTorrent);
</script>
<title>${ site_name }: ${ media.title }</title>
<style>
body {
margin: 0px;
padding: 0px;
}
video {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
</style>
</head>
<video id="video-player" poster="${ media.poster }">
</video>
<body>
</body>
</html>
Loading…
Cancel
Save