Move video markup into a separate file

This commit is contained in:
Kovid Goyal 2023-05-31 21:48:20 +05:30
parent b7f136962a
commit 5195e45a26
No known key found for this signature in database
GPG Key ID: 06BC317B515ACE7C
3 changed files with 96 additions and 98 deletions

View File

@ -1,30 +1,29 @@
/*jshint esversion: 6 */
(function() {
function init_timestamps() {
var loc = document.getElementById('timestamps-for-intro-video');
if (loc) {
var dl = loc.querySelector('dl');
dl.querySelectorAll('dt').forEach(dt => {
dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>';
dt.style.display = 'inline';
function init_timestamps() {
document.querySelectorAll('.timestamp-list').forEach(loc => {
var dl = loc.querySelector('dl');
dl.querySelectorAll('dt').forEach(dt => {
dt.innerHTML = '<a href="javascript:void(0)" style="text-decoration: none"><time>' + dt.innerHTML + '</time></a>';
dt.style.display = 'inline';
});
dl.addEventListener('click', handle_timestamp_click);
});
dl.addEventListener('click', handle_timestamp_click);
}
}
function handle_timestamp_click(e) {
if (e.target.tagName.toUpperCase() === 'TIME') {
const timestamp = e.target.textContent;
if (timestamp) {
const [minutes, seconds] = timestamp.split(':');
const totalSeconds = parseInt(minutes) * 60 + parseInt(seconds);
const video = document.querySelector('video');
video.currentTime = totalSeconds;
video.play();
function handle_timestamp_click(e) {
if (e.target.tagName.toUpperCase() === 'TIME') {
const timestamp = e.target.textContent;
if (timestamp) {
const [minutes, seconds] = timestamp.split(':');
const totalSeconds = parseInt(minutes) * 60 + parseInt(seconds);
const video = document.querySelector('video');
video.currentTime = totalSeconds;
video.play();
}
}
}
}
window.addEventListener('load', init_timestamps);
window.addEventListener('load', init_timestamps);
})();

View File

@ -57,85 +57,8 @@ kitty
* Lots more in :doc:`protocol-extensions`
.. only:: dirhtml
.. raw:: html
<video controls width="640" height="360" poster="_static/poster.png">
<source src="https://download.calibre-ebook.com/videos/kitty.mp4" type="video/mp4">
<source src="https://download.calibre-ebook.com/videos/kitty.webm" type="video/webm">
</video>
.. rst-class:: caption caption-text
Watch kitty in action!
To get started see :doc:`quickstart`.
.. only:: dirhtml
.. raw:: html
<div id="timestamps-for-intro-video" class="timestamp-list">
Timestamps for the above video:
00:00
Intro
00:39
Pager: View command output in same window: :kbd:`Ctrl+Shift+g`
01:43
Pager: View command output in a separate window
02:14
Pager: Uses shell integration in kitty
02:27
Tab text: The output of cwd and last cmd
03:03
Open files from ls output with mouse: :kbd:`Ctrl+Shift+Right-click`
04:04
Open files from ls output with keyboard: :kbd:`Ctrl+Shift+P>y`
04:26
Open files on click: ``ls --hyperlink=auto``
05:03
Open files on click: Filetype settings in open-actions.conf
05:45
hyperlinked-grep kitten: Open grep output in editor
07:18
Remote-file kitten: View remote files locally
08:31
Remote-file kitten: Edit remote files locally
10:01
icat kitten: View images directly
10:36
icat kitten: Download & display image/gif from internet
11:03
Kitty Graphics Protocol: Live image preview in ranger
11:25
icat kitten: Display image from remote server
12:04
unicode-input kitten: Emojis in terminal
12:54
Windows: Intro
13:36
Windows: Switch focus: :kbd:`Ctrl+Shift+win_nr`
13:48
Windows: Visual selection: :kbd:`Ctrl+Shift+F7`
13:58
Windows: Simultaneous input
14:15
Interactive Kitty Shell: :kbd:`Ctrl+Shift+Esc`
14:36
Broadcast text: ``launch --allow-remote-control kitty +kitten broadcast``
15:18
Kitty Remote Control Protocol
15:52
Interactive Kitty Shell: Help
16:34
Choose theme interactively: ``kitty +kitten themes -h``
17:23
Choose theme by name: ``kitty +kitten themes [options] [theme_name]``
.. raw:: html
</div>
.. include:: intro_vid.rst

76
docs/intro_vid.rst Normal file
View File

@ -0,0 +1,76 @@
.. raw:: html
<video controls width="640" height="360" poster="_static/poster.png">
<source src="https://download.calibre-ebook.com/videos/kitty.mp4" type="video/mp4">
<source src="https://download.calibre-ebook.com/videos/kitty.webm" type="video/webm">
</video>
.. rst-class:: caption caption-text
Watch kitty in action!
.. raw:: html
<div id="timestamps-for-intro-video" class="timestamp-list">
Timestamps for the above video:
00:00
Intro
00:39
Pager: View command output in same window: :kbd:`Ctrl+Shift+g`
01:43
Pager: View command output in a separate window
02:14
Pager: Uses shell integration in kitty
02:27
Tab text: The output of cwd and last cmd
03:03
Open files from ls output with mouse: :kbd:`Ctrl+Shift+Right-click`
04:04
Open files from ls output with keyboard: :kbd:`Ctrl+Shift+P>y`
04:26
Open files on click: ``ls --hyperlink=auto``
05:03
Open files on click: Filetype settings in open-actions.conf
05:45
hyperlinked-grep kitten: Open grep output in editor
07:18
Remote-file kitten: View remote files locally
08:31
Remote-file kitten: Edit remote files locally
10:01
icat kitten: View images directly
10:36
icat kitten: Download & display image/gif from internet
11:03
Kitty Graphics Protocol: Live image preview in ranger
11:25
icat kitten: Display image from remote server
12:04
unicode-input kitten: Emojis in terminal
12:54
Windows: Intro
13:36
Windows: Switch focus: :kbd:`Ctrl+Shift+win_nr`
13:48
Windows: Visual selection: :kbd:`Ctrl+Shift+F7`
13:58
Windows: Simultaneous input
14:15
Interactive Kitty Shell: :kbd:`Ctrl+Shift+Esc`
14:36
Broadcast text: ``launch --allow-remote-control kitty +kitten broadcast``
15:18
Kitty Remote Control Protocol
15:52
Interactive Kitty Shell: Help
16:34
Choose theme interactively: ``kitty +kitten themes -h``
17:23
Choose theme by name: ``kitty +kitten themes [options] [theme_name]``
.. raw:: html
</div>