Initial commit.
commit
67de7964a8
GPG Key ID:
1573F6D8EFE4D0CF
|
|
@ -0,0 +1,4 @@
|
|||
last 2 major versions
|
||||
last 2 years
|
||||
>= 1%
|
||||
not dead
|
||||
|
|
@ -0,0 +1,31 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# Deployed apps should consider commenting this line out:
|
||||
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
|
||||
###
|
||||
|
||||
docker-compose*
|
||||
*Dockerfile*
|
||||
.git*
|
||||
|
|
@ -0,0 +1,6 @@
|
|||
{
|
||||
"extends": "airbnb-base",
|
||||
"env": {
|
||||
"browser": true
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,28 @@
|
|||
# Logs
|
||||
logs
|
||||
*.log
|
||||
|
||||
# Runtime data
|
||||
pids
|
||||
*.pid
|
||||
*.seed
|
||||
|
||||
# Directory for instrumented libs generated by jscoverage/JSCover
|
||||
lib-cov
|
||||
|
||||
# Coverage directory used by tools like istanbul
|
||||
coverage
|
||||
|
||||
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
|
||||
.grunt
|
||||
|
||||
# Compiled binary addons (http://nodejs.org/api/addons.html)
|
||||
build/Release
|
||||
|
||||
# Dependency directory
|
||||
# Deployed apps should consider commenting this line out:
|
||||
# see https://npmjs.org/doc/faq.html#Should-I-check-my-node_modules-folder-into-git
|
||||
node_modules
|
||||
|
||||
# Built files
|
||||
dist/
|
||||
|
|
@ -0,0 +1,22 @@
|
|||
FROM alpine:3.7 AS video
|
||||
|
||||
RUN apk add --no-cache ffmpeg
|
||||
|
||||
COPY video/big.mp4 big.mp4
|
||||
|
||||
RUN mkdir /out
|
||||
RUN ffmpeg \
|
||||
-i big.mp4 \
|
||||
-c copy \
|
||||
-use_timeline 1 \
|
||||
-use_template 1 \
|
||||
-single_file 1 \
|
||||
-hls_playlist 1 \
|
||||
-f dash \
|
||||
/out/clock.mpd
|
||||
|
||||
###
|
||||
|
||||
FROM icedream/caddy
|
||||
|
||||
COPY --from=video /out /htdocs/video
|
||||
|
|
@ -0,0 +1,4 @@
|
|||
FROM node:8
|
||||
|
||||
COPY entrypoint.sh /usr/local/bin/dev-entrypoint
|
||||
ENTRYPOINT ["dev-entrypoint"]
|
||||
|
|
@ -0,0 +1,5 @@
|
|||
#!/bin/sh -e
|
||||
|
||||
NODE_ENV=development yarn
|
||||
yarn video
|
||||
exec yarn start
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
# Development stack
|
||||
|
||||
version: "3.6"
|
||||
|
||||
services:
|
||||
|
||||
player:
|
||||
build: deployment/docker/player
|
||||
ports:
|
||||
- "4545:4545"
|
||||
volumes:
|
||||
- .:/src
|
||||
stop_signal: TERM
|
||||
working_dir: /src
|
||||
|
|
@ -0,0 +1,37 @@
|
|||
{
|
||||
"name": "@icedream/wooden-clock",
|
||||
"version": "1.0.0",
|
||||
"main": "index.js",
|
||||
"author": "Carl Kittelberger <icedream@icedream.pw>",
|
||||
"license": "MIT",
|
||||
"devDependencies": {
|
||||
"@babel/core": "^7.0.0-rc.2",
|
||||
"@babel/node": "^7.0.0-rc.2",
|
||||
"@babel/preset-env": "^7.0.0-rc.2",
|
||||
"babel-loader": "^8.0.0-beta.6",
|
||||
"csp-html-webpack-plugin": "^2.3.0",
|
||||
"css-loader": "^1.0.0",
|
||||
"eslint": "^5.4.0",
|
||||
"eslint-config-airbnb-base": "^13.1.0",
|
||||
"eslint-plugin-import": "^2.14.0",
|
||||
"file-loader": "^2.0.0",
|
||||
"html-webpack-plugin": "^3.2.0",
|
||||
"mkdirp": "^0.5.1",
|
||||
"resolve-url-loader": "^2.3.0",
|
||||
"script-ext-html-webpack-plugin": "^2.0.1",
|
||||
"style-loader": "^0.22.1",
|
||||
"stylus": "^0.54.5",
|
||||
"stylus-loader": "^3.0.2",
|
||||
"url-loader": "^1.1.1",
|
||||
"webpack": "^4.17.1",
|
||||
"webpack-cli": "^3.1.0"
|
||||
},
|
||||
"dependencies": {
|
||||
"dashjs": "^2.9.0"
|
||||
},
|
||||
"scripts": {
|
||||
"build": "webpack",
|
||||
"start": "webpack-dev-server --mode development --content-base dist/ --host 0.0.0.0 --port 4545",
|
||||
"video": "mkdirp dist/video; ffmpeg -loglevel warning -stats -i video/big.mp4 -c copy -use_timeline 1 -use_template 1 -single_file 1 -hls_playlist 1 -f dash -y dist/video/clock.mpd"
|
||||
}
|
||||
}
|
||||
|
|
@ -0,0 +1,10 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en" dir="ltr">
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>The constructed wooden clock</title>
|
||||
</head>
|
||||
<body>
|
||||
<noscript>You definitely need JavaScript for this, sorry!</noscript>
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -0,0 +1,29 @@
|
|||
import dashjs from 'dashjs';
|
||||
import style from './player.styl';
|
||||
|
||||
// Nonce used by Webpack for CSP
|
||||
// eslint-disable-next-line
|
||||
const __webpack_nonce__ = 'uGo4I9ydb2hP393boc/24Vu7diUk/Mf84w9khcZkynk=';
|
||||
|
||||
window.addEventListener('load', () => {
|
||||
const playerContainer = document.createElement('video');
|
||||
playerContainer.classList.add(style.video);
|
||||
|
||||
// calculate start time
|
||||
const date = new Date();
|
||||
console.debug('Date:', date);
|
||||
console.debug('UTC time:', date.getTime());
|
||||
const localTime = date.getTime() - (1000 * 60 * date.getTimezoneOffset());
|
||||
console.debug('Local time:', localTime);
|
||||
const secondsOfDay = (localTime % (1000 * 60 * 60 * 24)) / 1000;
|
||||
console.debug('Seconds of day:', secondsOfDay);
|
||||
|
||||
// initialize video
|
||||
const player = dashjs.MediaPlayer().create();
|
||||
const url = `video/clock.mpd#s=${secondsOfDay}`;
|
||||
console.log('URL:', url);
|
||||
const autoplay = true;
|
||||
player.initialize(playerContainer, url, autoplay);
|
||||
|
||||
document.body.appendChild(playerContainer);
|
||||
});
|
||||
|
|
@ -0,0 +1,16 @@
|
|||
html, body
|
||||
background: #000
|
||||
padding: 0
|
||||
margin: 0
|
||||
height: 100%
|
||||
min-height: 100%
|
||||
|
||||
body
|
||||
text-align: center
|
||||
|
||||
.video
|
||||
position: fixed
|
||||
top: 0
|
||||
left: 0
|
||||
width: 100%
|
||||
height: 100%
|
||||
|
|
@ -0,0 +1,105 @@
|
|||
import HtmlWebpackPlugin from 'html-webpack-plugin';
|
||||
import CspHtmlWebpackPlugin from 'csp-html-webpack-plugin';
|
||||
import ScriptExtHtmlWebpackPlugin from 'script-ext-html-webpack-plugin';
|
||||
|
||||
import path from 'path';
|
||||
|
||||
const sourceDirectory = path.resolve(__dirname, 'src');
|
||||
|
||||
export default (env, { mode }) => {
|
||||
const development = mode === 'development';
|
||||
const production = !development;
|
||||
|
||||
return ({
|
||||
optimization: {
|
||||
runtimeChunk: {
|
||||
name: 'wp',
|
||||
},
|
||||
},
|
||||
|
||||
plugins: [
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/index.html',
|
||||
inject: 'head',
|
||||
viewport: 'width=device-width, initial-scale=1, shrink-to-fit=no',
|
||||
minify: production,
|
||||
xhtml: true,
|
||||
}),
|
||||
production && new CspHtmlWebpackPlugin({
|
||||
'base-uri': "'self'",
|
||||
'object-src': "'none'",
|
||||
'script-src': ["'self'", 'nonce-uGo4I9ydb2hP393boc/24Vu7diUk/Mf84w9khcZkynk='],
|
||||
'style-src': ["'self'"],
|
||||
}),
|
||||
production && new ScriptExtHtmlWebpackPlugin({
|
||||
defaultAttribute: 'defer',
|
||||
custom: [
|
||||
{
|
||||
test: /./,
|
||||
attribute: 'nonce',
|
||||
value: 'uGo4I9ydb2hP393boc/24Vu7diUk/Mf84w9khcZkynk=',
|
||||
},
|
||||
],
|
||||
}),
|
||||
].filter(v => v),
|
||||
|
||||
module: {
|
||||
rules: [
|
||||
{
|
||||
test: /\.js$/i,
|
||||
include: sourceDirectory,
|
||||
use: [
|
||||
{
|
||||
loader: 'babel-loader',
|
||||
options: {
|
||||
presets: [
|
||||
['@babel/env', {
|
||||
targets: {
|
||||
},
|
||||
}],
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
test: /\.css$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
camelCase: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
|
||||
{
|
||||
test: /\.styl$/i,
|
||||
use: [
|
||||
'style-loader',
|
||||
{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
modules: true,
|
||||
camelCase: true,
|
||||
importLoaders: 2,
|
||||
},
|
||||
},
|
||||
'resolve-url-loader',
|
||||
{
|
||||
loader: 'stylus-loader',
|
||||
options: {
|
||||
sourceMap: true,
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
};
|
||||
Loading…
Reference in New Issue