mirror of
https://github.com/asciinema/asciinema.git
synced 2025-12-14 18:57:59 +01:00
Upgrade player to the latest version
This commit is contained in:
1
assets/asciinema-player-ui.min.js
vendored
1
assets/asciinema-player-ui.min.js
vendored
File diff suppressed because one or more lines are too long
1
assets/asciinema-player-worker.min.js
vendored
1
assets/asciinema-player-worker.min.js
vendored
File diff suppressed because one or more lines are too long
48
assets/asciinema-player.css
vendored
48
assets/asciinema-player.css
vendored
@@ -469,6 +469,7 @@ div.ap-control-bar span.ap-playback-button {
|
|||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
padding: 10px;
|
padding: 10px;
|
||||||
|
margin: 0 0 0 2px;
|
||||||
}
|
}
|
||||||
div.ap-control-bar span.ap-playback-button svg {
|
div.ap-control-bar span.ap-playback-button svg {
|
||||||
height: 12px;
|
height: 12px;
|
||||||
@@ -537,6 +538,7 @@ div.ap-control-bar .ap-fullscreen-button {
|
|||||||
width: 14px;
|
width: 14px;
|
||||||
height: 14px;
|
height: 14px;
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
|
margin: 0 2px 0 4px;
|
||||||
}
|
}
|
||||||
div.ap-control-bar .ap-fullscreen-button svg {
|
div.ap-control-bar .ap-fullscreen-button svg {
|
||||||
width: 14px;
|
width: 14px;
|
||||||
@@ -556,7 +558,7 @@ div.ap-control-bar .ap-fullscreen-button .ap-tooltip {
|
|||||||
div.ap-control-bar .ap-kbd-button {
|
div.ap-control-bar .ap-kbd-button {
|
||||||
height: 14px;
|
height: 14px;
|
||||||
padding: 9px;
|
padding: 9px;
|
||||||
margin: 0 4px;
|
margin: 0 0 0 4px;
|
||||||
}
|
}
|
||||||
div.ap-control-bar .ap-kbd-button svg {
|
div.ap-control-bar .ap-kbd-button svg {
|
||||||
width: 26px;
|
width: 26px;
|
||||||
@@ -567,6 +569,19 @@ div.ap-control-bar .ap-kbd-button .ap-tooltip {
|
|||||||
left: initial;
|
left: initial;
|
||||||
transform: none;
|
transform: none;
|
||||||
}
|
}
|
||||||
|
div.ap-control-bar .ap-speaker-button {
|
||||||
|
width: 19px;
|
||||||
|
padding: 6px 9px;
|
||||||
|
margin: 0 0 0 4px;
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
div.ap-control-bar .ap-speaker-button svg {
|
||||||
|
width: 19px;
|
||||||
|
}
|
||||||
|
div.ap-control-bar .ap-speaker-button .ap-tooltip {
|
||||||
|
left: -50%;
|
||||||
|
transform: none;
|
||||||
|
}
|
||||||
div.ap-wrapper.ap-hud .ap-control-bar {
|
div.ap-wrapper.ap-hud .ap-control-bar {
|
||||||
opacity: 1;
|
opacity: 1;
|
||||||
}
|
}
|
||||||
@@ -666,6 +681,7 @@ span.ap-marker-container:hover span.ap-marker {
|
|||||||
}
|
}
|
||||||
.ap-player .ap-overlay-start .ap-play-button div span svg {
|
.ap-player .ap-overlay-start .ap-play-button div span svg {
|
||||||
height: 100%;
|
height: 100%;
|
||||||
|
display: inline-block;
|
||||||
}
|
}
|
||||||
.ap-player .ap-overlay-start .ap-play-button svg {
|
.ap-player .ap-overlay-start .ap-play-button svg {
|
||||||
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
|
filter: drop-shadow(0px 0px 5px rgba(0, 0, 0, 0.4));
|
||||||
@@ -754,6 +770,36 @@ span.ap-marker-container:hover span.ap-marker {
|
|||||||
.ap-player .ap-overlay-error span {
|
.ap-player .ap-overlay-error span {
|
||||||
font-size: 8em;
|
font-size: 8em;
|
||||||
}
|
}
|
||||||
|
.ap-player .slide-enter-active {
|
||||||
|
transition: opacity 0.2s;
|
||||||
|
}
|
||||||
|
.ap-player .slide-enter-active.ap-was-playing {
|
||||||
|
transition: top 0.2s ease-out, opacity 0.2s;
|
||||||
|
}
|
||||||
|
.ap-player .slide-exit-active {
|
||||||
|
transition: top 0.2s ease-in, opacity 0.2s;
|
||||||
|
}
|
||||||
|
.ap-player .slide-enter {
|
||||||
|
top: -50%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
|
.ap-player .slide-enter-to {
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
.ap-player .slide-enter,
|
||||||
|
.ap-player .slide-enter-to,
|
||||||
|
.ap-player .slide-exit,
|
||||||
|
.ap-player .slide-exit-to {
|
||||||
|
bottom: auto;
|
||||||
|
height: 100%;
|
||||||
|
}
|
||||||
|
.ap-player .slide-exit {
|
||||||
|
top: 0%;
|
||||||
|
}
|
||||||
|
.ap-player .slide-exit-to {
|
||||||
|
top: -50%;
|
||||||
|
opacity: 0;
|
||||||
|
}
|
||||||
@keyframes ap-loader-rotation {
|
@keyframes ap-loader-rotation {
|
||||||
0% {
|
0% {
|
||||||
transform: rotate(0deg);
|
transform: rotate(0deg);
|
||||||
|
|||||||
1
assets/asciinema-player.min.js
vendored
Normal file
1
assets/asciinema-player.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
@@ -38,7 +38,7 @@
|
|||||||
</style>
|
</style>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<script src="asciinema-player-ui.min.js"></script>
|
<script src="asciinema-player.min.js"></script>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
const loc = window.location;
|
const loc = window.location;
|
||||||
@@ -70,7 +70,7 @@
|
|||||||
|
|
||||||
console.debug('initializing the player', { src, opts });
|
console.debug('initializing the player', { src, opts });
|
||||||
|
|
||||||
window.player = AsciinemaPlayer.create(src, document.body, 'asciinema-player-worker.min.js', opts);
|
window.player = AsciinemaPlayer.create(src, document.body, opts);
|
||||||
|
|
||||||
window.player.addEventListener('reset', () => {
|
window.player.addEventListener('reset', () => {
|
||||||
const el = window.player.el.getElementsByClassName('ap-player')[0];
|
const el = window.player.el.getElementsByClassName('ap-player')[0];
|
||||||
|
|||||||
Reference in New Issue
Block a user