k8s-lbry: Adds asciinema asciicast.

This commit is contained in:
Ryan McGuire 2019-05-30 18:13:21 -04:00 committed by Leopere
parent c5dc75d685
commit d04ff02c45
9 changed files with 19670 additions and 1 deletions

View file

@ -7,7 +7,7 @@ Last Update: May 30 2019
Deploy lbrycrd, lbrynet, chainquery, mysql, and spee.ch on your Kubernetes
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 -->
<!-- run: npx markdown-toc -i README.md -->

View 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.

File diff suppressed because it is too large Load diff

Binary file not shown.

After

Width:  |  Height:  |  Size: 190 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 51 KiB

View 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>

View 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
}
}
})
}

File diff suppressed because it is too large Load diff

File diff suppressed because one or more lines are too long