k8s-lbry: Adds asciinema asciicast.
This commit is contained in:
parent
c5dc75d685
commit
d04ff02c45
9 changed files with 19670 additions and 1 deletions
|
@ -7,7 +7,7 @@ Last Update: May 30 2019
|
||||||
Deploy lbrycrd, lbrynet, chainquery, mysql, and spee.ch on your Kubernetes
|
Deploy lbrycrd, lbrynet, chainquery, mysql, and spee.ch on your Kubernetes
|
||||||
cluster.
|
cluster.
|
||||||
|
|
||||||
[![asciicast](https://enigmacurry.github.io/kick-ascii/cast/k8s-lbry.png)](https://enigmacurry.github.io/kick-ascii/?cast=k8s-lbry&bg=lbry.png)
|
[![asciicast](https://enigmacurry.github.io/lbry-docker/contrib/k8s-lbry/kick-ascii/cast/k8s-lbry.png)](https://enigmacurry.github.io/lbry-docker/contrib/k8s-lbry/kick-ascii/?cast=k8s-lbry&bg=lbry.png)
|
||||||
|
|
||||||
<!-- Regenerate Table of contents with markdown-toc npm library -->
|
<!-- Regenerate Table of contents with markdown-toc npm library -->
|
||||||
<!-- run: npx markdown-toc -i README.md -->
|
<!-- run: npx markdown-toc -i README.md -->
|
||||||
|
|
47
contrib/k8s-lbry/kick-ascii/README.md
Normal file
47
contrib/k8s-lbry/kick-ascii/README.md
Normal file
|
@ -0,0 +1,47 @@
|
||||||
|
# kick-ascii
|
||||||
|
|
||||||
|
A mobile-first responsive layout implemention of
|
||||||
|
[asciinema-player](https://github.com/asciinema/asciinema-player). Self host
|
||||||
|
your own ASCII theatre on the web.
|
||||||
|
|
||||||
|
[![asciicast](http://enigmacurry.github.io/kick-ascii/cast/index.jpg)](http://enigmacurry.github.io/kick-ascii/?cast=index&bg=matrix.jpg)
|
||||||
|
|
||||||
|
* Fork this repository on GitHub.
|
||||||
|
|
||||||
|
* Go to your new repository's Settings -> Options -> GitHub Pages -> Source ->
|
||||||
|
**choose master branch dropdown**
|
||||||
|
|
||||||
|
* Visit `http://USERNAME.github.io/kick-ascii` (change USERNAME to your github username or organization name.)
|
||||||
|
|
||||||
|
* Link to index.cast:
|
||||||
|
* [http://enigmacurry.github.io/kick-ascii](http://enigmacurry.github.io/kick-ascii)
|
||||||
|
* Link to a specific cast:
|
||||||
|
* [http://enigmacurry.github.io/kick-ascii/?cast=matrix](http://enigmacurry.github.io/kick-ascii/?cast=matrix)
|
||||||
|
* Specify a custom background image:
|
||||||
|
* [http://enigmacurry.github.io/kick-ascii/?cast=k8s-lbry&bg=lbry.png](http://enigmacurry.github.io/kick-ascii/?cast=k8s-lbry&bg=lbry.png)
|
||||||
|
* Choose a different playback speed:
|
||||||
|
* [http://enigmacurry.github.io/kick-ascii/?cast=k8s-lbry&bg=lbry.png&speed=3](http://enigmacurry.github.io/kick-ascii/?cast=k8s-lbry&bg=lbry.png&speed=3)
|
||||||
|
* Disable pre-loading, no autoplay, no loop:
|
||||||
|
* [http://enigmacurry.github.io/kick-ascii/?cast=matrix&autoplay=false&preload=false&loop=false](http://enigmacurry.github.io/kick-ascii/?cast=matrix&autoplay=false&preload=false&loop=false)
|
||||||
|
|
||||||
|
* Make new recordings with [asciinema](https://asciinema.org/).
|
||||||
|
|
||||||
|
* Put cast files and cover images in the `cast` directory.
|
||||||
|
|
||||||
|
* Put custom background images in the `img` directory.
|
||||||
|
|
||||||
|
* Commit your changes to git, and push to GitHub.
|
||||||
|
|
||||||
|
* Alternatively, upload this entire directory to any webhost. It's just a
|
||||||
|
static website.
|
||||||
|
|
||||||
|
## I can't click on the progress bar to jump around the timeline!
|
||||||
|
|
||||||
|
This is a feature of the upstream
|
||||||
|
[asciinema-player](https://github.com/asciinema/asciinema-player), however in
|
||||||
|
several instances of my testing, it has rendered the page entirely unresponsive.
|
||||||
|
It happens often enough that I've decided to make the progress bar non-clickable
|
||||||
|
(`pointer-events: none` in [asciinema-player.css](player/asciinema-player.css)).
|
||||||
|
The arrow keys are still enabled, and they serve the same function, to rewind
|
||||||
|
and fast forward. However, I would caution you to use this feature sparingly,
|
||||||
|
and not try to advance too many frames at once.
|
15738
contrib/k8s-lbry/kick-ascii/cast/k8s-lbry.cast
Normal file
15738
contrib/k8s-lbry/kick-ascii/cast/k8s-lbry.cast
Normal file
File diff suppressed because it is too large
Load diff
BIN
contrib/k8s-lbry/kick-ascii/cast/k8s-lbry.png
Normal file
BIN
contrib/k8s-lbry/kick-ascii/cast/k8s-lbry.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 190 KiB |
BIN
contrib/k8s-lbry/kick-ascii/img/lbry.png
Normal file
BIN
contrib/k8s-lbry/kick-ascii/img/lbry.png
Normal file
Binary file not shown.
After Width: | Height: | Size: 51 KiB |
12
contrib/k8s-lbry/kick-ascii/index.html
Normal file
12
contrib/k8s-lbry/kick-ascii/index.html
Normal file
|
@ -0,0 +1,12 @@
|
||||||
|
<html>
|
||||||
|
<head>
|
||||||
|
<link rel="stylesheet" type="text/css" href="player/asciinema-player.css">
|
||||||
|
<link href="data:image/x-icon;base64,AAABAAEAEBAQAAEABAAoAQAAFgAAACgAAAAQAAAAIAAAAAEABAAAAAAAgAAAAAAAAAAAAAAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAe94AAEpSAABKUgAAe94AAAAAAAB73gAAe9IAAHvSAAB73gAAAAAAAHveAAB6XgAAel4AAHveAAAAAAAA" rel="icon" type="image/x-icon" />
|
||||||
|
</head>
|
||||||
|
<body>
|
||||||
|
<div id="CRT_BOX"></div>
|
||||||
|
<script src="player/asciinema-player.v2.6.1.js"></script>
|
||||||
|
<script src="kick-ascii.js"></script>
|
||||||
|
</body>
|
||||||
|
</html>
|
||||||
|
|
62
contrib/k8s-lbry/kick-ascii/kick-ascii.js
Normal file
62
contrib/k8s-lbry/kick-ascii/kick-ascii.js
Normal file
|
@ -0,0 +1,62 @@
|
||||||
|
window.onload = function() {
|
||||||
|
var crt = document.getElementById("CRT_BOX")
|
||||||
|
var urlParams = new URLSearchParams(window.location.search)
|
||||||
|
var cast = urlParams.get("cast") != null ? urlParams.get("cast") : "index"
|
||||||
|
var speed = urlParams.get("speed") == null ? " speed=\"1\" " : " speed=\"" + urlParams.get("speed") + "\" "
|
||||||
|
var bg = urlParams.get("bg")
|
||||||
|
var autoplay = urlParams.get("autoplay") === "false" ? "" : " autoplay=\"true\" "
|
||||||
|
var loop = urlParams.get("loop") === "false" ? "" : " loop=\"true\" "
|
||||||
|
var preload = urlParams.get("preload") === "false" ? "" : " preload=\"true\" "
|
||||||
|
var fontsize = urlParams.get("fontsize") == null ? " fontsize=\"small\" " : " fontsize=\"" + urlParams.get("fontsize") + "\" "
|
||||||
|
|
||||||
|
crt.innerHTML = "<asciinema-player id=\"asciinema-player\" src=\"cast/" + cast + ".cast\"" + fontsize + autoplay + loop + preload + speed + "></asciinema-player>"
|
||||||
|
|
||||||
|
var player = document.getElementsByTagName("asciinema-player")[0]
|
||||||
|
|
||||||
|
var background = document.createElement("img")
|
||||||
|
background.classList.add("bg_image")
|
||||||
|
|
||||||
|
if (bg != null) {
|
||||||
|
background.src = "img/" + bg
|
||||||
|
document.body.append(background)
|
||||||
|
}
|
||||||
|
|
||||||
|
window.addEventListener('resize', function() {
|
||||||
|
var wrapper = document.getElementsByClassName("asciinema-player-wrapper")[0]
|
||||||
|
if (wrapper != null) {
|
||||||
|
var control_bar_offset = 23;
|
||||||
|
var scale = (document.body.clientHeight / (wrapper.clientHeight + control_bar_offset));
|
||||||
|
if (wrapper.clientWidth * scale < document.body.clientWidth) {
|
||||||
|
crt.style.transform = "scale("+scale+") translate(-50%, 0%)";
|
||||||
|
crt.classList.add("crt_wide")
|
||||||
|
background.classList.remove("bg_raised")
|
||||||
|
} else {
|
||||||
|
scale = (document.body.clientWidth / (wrapper.clientWidth));
|
||||||
|
crt.style.transform = "scale("+scale+")";
|
||||||
|
crt.classList.remove("crt_wide")
|
||||||
|
background.classList.add("bg_raised")
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
window.dispatchEvent(new Event('resize'));
|
||||||
|
setInterval(function(){window.dispatchEvent(new Event('resize'));}, 1000)
|
||||||
|
|
||||||
|
var playing = true;
|
||||||
|
let drag = false;
|
||||||
|
|
||||||
|
// Click anywhere to play/pause
|
||||||
|
// Allow selecting/dragging text without affecting play/pause
|
||||||
|
document.addEventListener('mousedown', () => drag = false);
|
||||||
|
document.addEventListener('mousemove', () => drag = true);
|
||||||
|
document.addEventListener('mouseup', function() {
|
||||||
|
if(!drag){
|
||||||
|
if (playing) {
|
||||||
|
player.pause()
|
||||||
|
playing = false
|
||||||
|
} else {
|
||||||
|
player.play()
|
||||||
|
playing = true
|
||||||
|
}
|
||||||
|
}
|
||||||
|
})
|
||||||
|
}
|
2597
contrib/k8s-lbry/kick-ascii/player/asciinema-player.css
Normal file
2597
contrib/k8s-lbry/kick-ascii/player/asciinema-player.css
Normal file
File diff suppressed because it is too large
Load diff
1213
contrib/k8s-lbry/kick-ascii/player/asciinema-player.v2.6.1.js
Normal file
1213
contrib/k8s-lbry/kick-ascii/player/asciinema-player.v2.6.1.js
Normal file
File diff suppressed because one or more lines are too long
Loading…
Reference in a new issue