diff options
Diffstat (limited to 'templates')
| -rw-r--r-- | templates/chapters.md | 3 | ||||
| -rw-r--r-- | templates/chat.md | 1 | ||||
| -rw-r--r-- | templates/help.md | 12 | ||||
| -rw-r--r-- | templates/page.tmpl | 227 | ||||
| -rw-r--r-- | templates/pagedraft.md | 5 | ||||
| -rw-r--r-- | templates/sched.md | 20 | ||||
| -rw-r--r-- | templates/script.js | 227 | ||||
| -rw-r--r-- | templates/subtitle.md | 2 | ||||
| -rw-r--r-- | templates/time.md | 1 | ||||
| -rw-r--r-- | templates/vid.md | 12 |
10 files changed, 476 insertions, 34 deletions
diff --git a/templates/chapters.md b/templates/chapters.md new file mode 100644 index 00000000..ec06bf02 --- /dev/null +++ b/templates/chapters.md @@ -0,0 +1,3 @@ +<pre class="chapters" data-target="<TMPL_VAR vidid>"> +<TMPL_VAR data> +</pre> diff --git a/templates/chat.md b/templates/chat.md new file mode 100644 index 00000000..93e77e68 --- /dev/null +++ b/templates/chat.md @@ -0,0 +1 @@ +<iframe src="https://chat.emacsconf.org" width="100%" height="700"></iframe> diff --git a/templates/help.md b/templates/help.md new file mode 100644 index 00000000..749c8ee3 --- /dev/null +++ b/templates/help.md @@ -0,0 +1,12 @@ +<details class="help"><summary><TMPL_IF volunteer>Work in progress<TMPL_ELSE>Help wanted</TMPL_IF><TMPL_IF summary>: <TMPL_VAR summary></TMPL_IF summary> <TMPL_IF volunteer>(Volunteered: <TMPL_VAR volunteer>)</TMPL_IF></summary> +<TMPL_IF main_captions> +This talk does not have captions yet. Would you like to help [caption this talk](/2021/contribute/#edit-captions)? You may be able to start with these +[auto-generated captions](<TMPL_VAR main_captions>). +</TMPL_IF><TMPL_IF qa> +Want to help make the Q&A session easier to search? You can [add chapter markers](/2021/contribute/#chapter-markers) or [edit the captions](/2021/contribute/#edit-captions), maybe starting with these +[auto-generated captions](<TMPL_VAR qa>). +</TMPL_IF><TMPL_VAR message> +<TMPL_IF volunteer>[[!tag in-progress]]<TMPL_ELSE> +(If you want to work on this and you think it might take you a while, you can reserve this task by editing the page and adding volunteer="your-name date" or by e-mailing <emacsconf-submit@gnu.org>.) +[[!tag help <TMPL_VAR tags>]]</TMPL_IF volunteer> +</details> diff --git a/templates/page.tmpl b/templates/page.tmpl index 0ccf7af6..cc8357d7 100644 --- a/templates/page.tmpl +++ b/templates/page.tmpl @@ -42,7 +42,7 @@ /* SeekToTime - simple script to add video time jump functionality to timestamp links - Copyright (C) 2020 Grant Shangreaux + Copyright (C) 2020-2024 Grant Shangreaux and Sacha Chua This program is free software: you can redistribute it and/or modify it under the terms of the GNU Affero General Public License as @@ -65,9 +65,7 @@ This could be extended to accept hours in the time stamp as well, but currently does not. */ - let mainVideo; - let qnaVideo; // some pages have a questions and answers video - let timestamps; + let timestamps; // expects a string like "mm:ss.mmm" function parseSeconds(timeString) { @@ -76,38 +74,34 @@ }, 0); } - window.onload = function initScript() { - mainVideo = document.getElementById("mainVideo"); - qnaVideo = document.getElementById("qnaVideo"); - timestamps = document.getElementsByClassName("time-link"); - let len = timestamps.length; - for (let i = 0; i < len; i++) { - timestamps[i].onclick = function () { - const videoType = this.href.split("/").pop(); - const video = (videoType == "#mainVideo") ? mainVideo : qnaVideo; - video.currentTime = parseSeconds(this.innerText) - }; - } - let handleSubtitleClick = function(event) { - let video = event.target.attributes['data-video'].value; - let start = event.target.attributes['data-start'].value - let videoElem = document.getElementById(video); - if (videoElem) { - videoElem.currentTime = parseSeconds(start); - videoElem.scrollIntoView(); - } - } + function handleSubtitleClick(event) { + var video = event.target.getAttribute('data-video'); + var start = event.target.getAttribute('data-start'); + const stickyVideo = document.querySelector('.transcript #' + video); + const indexCardVideo = document.querySelector('.vid #' + video); + if (indexCardVideo) { + indexCardVideo.currentTime = parseSeconds(start); + } + if (stickyVideo && window.getComputedStyle(stickyVideo).display == 'block') { + stickyVideo.currentTime = parseSeconds(start); + } else { + indexCardVideo.scrollIntoView(); + } + if (event.preventDefault) { + event.preventDefault(); + } + } + window.onload = function initScript() { let subtitles = document.getElementsByClassName('subtitle'); for (let i = 0; i < subtitles.length; i++) { subtitles[i].onclick = handleSubtitleClick; } - } // @license-end </script> </head> -<body> +<body <TMPL_IF SIDEBAR>class="has-sidebar"</TMPL_IF>> <TMPL_IF HTML5><article class="page"><TMPL_ELSE><div class="page"></TMPL_IF> @@ -137,10 +131,11 @@ <TMPL_IF HAVE_ACTIONS> <TMPL_IF HTML5><nav class="actions"><TMPL_ELSE><div class="actions"></TMPL_IF> <ul> +<!-- <li><a href="<TMPL_VAR BASEURL>donate/">❤️ Donate</a></li> --> <TMPL_IF EDITURL> <li><a href="<TMPL_VAR EDITURL>" rel="nofollow">Edit</a></li> <TMPL_ELSE> -<li><a href="/edit/">Edit <span class="muted">(how to)</span></a></li> +<li><a href="<TMPL_VAR BASEURL>edit/">Edit <span class="muted">(how to)</span></a></li> </TMPL_IF> <TMPL_IF RECENTCHANGESURL> <li><a href="<TMPL_VAR RECENTCHANGESURL>">Recent Changes</a></li> @@ -290,5 +285,181 @@ Last edited <TMPL_VAR MTIME> <TMPL_IF HTML5></footer><TMPL_ELSE></div></TMPL_IF> <TMPL_IF HTML5></article><TMPL_ELSE></div></TMPL_IF> + +<script> + // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0 + // Copyright (C) 2021, 2022 Sacha Chua + + if (document.querySelector('.times')) { + var dateOptions = {dateStyle: 'short', timeStyle: 'short'}; + var localStart = (new Date(document.querySelector('.times').getAttribute('start'))).toLocaleString([], dateOptions); + var localEnd = (new Date(document.querySelector('.times').getAttribute('end'))).toLocaleString([], dateOptions); + var dateElem = document.createElement('div'); + dateElem.appendChild(document.createTextNode('Your local time: ~ ' + localStart + ' to ~ ' + localEnd)); + document.querySelector('.times').prepend(dateElem); + if (document.querySelector('.times').querySelector('.others')) { + document.querySelector('.times').querySelector('.others').style.display = 'none'; + } + } + if (document.querySelector('.time-overlay')) { + document.querySelectorAll('.time-overlay').forEach(function (o) { + if (o.getAttribute('title')) return; + var dateOptions = {dateStyle: 'short', timeStyle: 'short'}; + var localStart, localEnd; + if (o.getAttribute('start') && o.getAttribute('end')) { + localStart = (new Date(o.getAttribute('start'))).toLocaleString([], dateOptions); + localEnd = (new Date(o.getAttribute('end'))).toLocaleString([], dateOptions); + o.setAttribute('title', 'Your local time: ~ ' + localStart + ' to ~ ' + localEnd); + } else if (o.getAttribute('start')) { + localStart = (new Date(o.getAttribute('start'))).toLocaleString([], dateOptions); + o.setAttribute('title', 'Your local time: ~ ' + localStart); + } + }); + } + + if (document.querySelector('a[name=transcript]')) { + var transcriptLink = document.createElement('a'); + transcriptLink.setAttribute('href', '#transcript'); + transcriptLink.textContent = 'View transcript'; + var video = document.querySelector('.mainVideo video'); + if (video) { + var resources = document.querySelector('.mainVideo video').closest('.vid').querySelector('.resources'); + var transcriptDiv = document.createElement('div'); + transcriptDiv.appendChild(transcriptLink) + if (resources) { resources.prepend(transcriptDiv); } + } + } + var chat = document.querySelector('.chat-iframe'); + if (chat) { + if (chat.getAttribute('data-track')) { + chat.innerHTML = '<iframe src="https://chat.emacsconf.org?join=emacsconf,emacsconf-' + + chat.getAttribute('data-track').replace(/[^A-Za-z]/g, '') + '" height="600" width="100%"></iframe>'; + } else { + chat.innerHTML = '<iframe src="https://chat.emacsconf.org" height="600" width="100%"></iframe>'; + } + } + + // @license-end +</script> +<script> + // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0 + // Copyright (c) 2021 Sacha Chua - CC0 Public Domain + function displayChapters(elem) { + var i; + var chapter; + var list = document.createElement('ol'); + list.setAttribute('class', 'chapters'); + var link; + var target = elem.getAttribute('data-target'); + var video = document.getElementById(target); + var track; + if (video) { + track = video.addTextTrack('chapters'); + track.mode = 'hidden'; + } + var chapters = elem.textContent.split(/[ \t]*\n+[ \t]*/).forEach(function(line) { + var m = (line.match(/^(((?:[0-9]+:)?[0-9]+:[0-9]+)(?:\.[0-9]+))[ \t]+(.*)/)); + if (m) { + var start = m[1]; + var text = m[3]; + chapter = document.createElement('li'); + link = document.createElement('a'); + link.setAttribute('href', '#'); + link.setAttribute('data-video', target); + link.setAttribute('data-start', start); + link.setAttribute('data-start-s', parseSeconds(start)); + link.appendChild(document.createTextNode(m[2] + ' ' + text)); + link.onclick = handleSubtitleClick; + chapter.appendChild(link); + list.appendChild(chapter); + if (track) { + var time = parseSeconds(start); + if (track.cues.length > 0) { + track.cues[track.cues.length - 1].endTime = time - 1; + } + track.addCue(new VTTCue(time, time, text)); + } + } + }) + if (track && track.cues.length > 0) { + video.addEventListener('durationchange', function() { + track.cues[track.cues.length - 1].endTime = video.duration; + }); + track.addEventListener('cuechange', function() { + if (!this.activeCues[0]) return; + if (list.querySelector('.current')) { + list.querySelector('.current').className = ''; + } + var chapter; + if (chapter = list.querySelector('a[data-start-s="' + this.activeCues[0].startTime + '"]')) { + chapter.parentNode.className = 'current'; + } + }); + } + elem.parentNode.replaceChild(list, elem); + } + + document.querySelectorAll('pre.chapters').forEach(displayChapters); + + var video = document.querySelector('video.reload'); + if (video) { + var myVar = setInterval(reloadAsNeeded, 1000); + var oldTime = ''; + function reloadAsNeeded() { + if ((video.paused != true && (video.currentTime - oldTime) == 0 && video.currentTime != 0)) { + var source = video.querySelector('source'); + var oldVideo = source.src; + source.src = ''; + source.src = oldVideo; + video.load(); + video.play(); + } + oldTime = video.currentTime; + }; + } + + /* videoType: mainVideo, qanda */ + function addStickyVideo(videoType) { + const transcriptDiv = document.querySelector('.transcript-' + videoType); + const video = document.querySelector('.vid.' + videoType + ' video'); + if (!video || !transcriptDiv) return; + if (transcriptDiv.querySelector('.vid')) + transcriptDiv.querySelector('.vid').remove(); + // already has it + // TODO: Make a copy of the video and place it at the start of the transcript div, positioned to the left, and sticky, but only on large screens. + const videoCopy = video.cloneNode(true); + transcriptDiv.prepend(videoCopy); + videoCopy.classList.add('sticky-video'); + // TODO: fix the ID + + } + + + + // @license-end + // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0 + // Copyright (c) 2023 Sacha Chua - CC0 Public Domain + function highlightTalks() { + // highlight any talk mentioned in the highlight URL parameter + var params = new URLSearchParams(window.location.search); + if (!params.get('highlight')) return; + var talks = params.get('highlight').split(',').filter(function(o) { return o.match(/^[-a-z0-9]+$/); }); + var regexp = new RegExp('/talks/(' + talks.join('|') + ')/?$'); + document.querySelectorAll('a[href]').forEach(function(link) { + console.debug(link.getAttribute('href'), link.getAttribute('href').match(regexp)); + if (link.getAttribute('href').match(regexp)) { + console.debug(link); + link.classList.add('highlight'); + } + }); + } + + addEventListener('DOMContentLoaded', highlightTalks); + addEventListener('DOMContentLoaded', function() { + addStickyVideo('mainVideo'); + addStickyVideo('qanda'); + }); + // @license-end +</script> </body> </html> diff --git a/templates/pagedraft.md b/templates/pagedraft.md new file mode 100644 index 00000000..7fd08768 --- /dev/null +++ b/templates/pagedraft.md @@ -0,0 +1,5 @@ +<div class="draft"> THIS IS A DRAFT DOCUMENT. It's not ready for +sharing yet. We're still working on it! Feel free to update it or +e-mail +<a href="mailto:emacsconf-org@gnu.org">emacsconf-org@gnu.org</a>. +</div> diff --git a/templates/sched.md b/templates/sched.md new file mode 100644 index 00000000..aa64e31a --- /dev/null +++ b/templates/sched.md @@ -0,0 +1,20 @@ +<div data-start="<TMPL_VAR startutc>" data-end="<TMPL_VAR endutc>" class="sched-entry <TMPL_IF track>track-<TMPL_VAR track></TMPL_IF track>"> +<div class="sched-meta"> +<TMPL_IF start> +<span class="sched-time"><span class="sched-start"><TMPL_VAR start></span> +<TMPL_IF end> - <span class="sched-end"><TMPL_VAR end></span></TMPL_IF end> +</span></TMPL_IF start> +<TMPL_IF track> <span class="sched-track <TMPL_VAR track>"><TMPL_IF watch><a href="<TMPL_VAR watch>"></TMPL_IF><TMPL_VAR track><TMPL_IF watch></a></TMPL_IF></span></TMPL_IF track> +<TMPL_IF q-and-a> <span class="sched-q-and-a">Q&A: <TMPL_VAR q-and-a></span> </TMPL_IF q-and-a> +<TMPL_IF pad> <span class="sched-pad"><a href="<TMPL_VAR pad>">Etherpad</a></TMPL_IF pad> +</div> +<div class="sched-title"><a href="<TMPL_VAR url>"><TMPL_VAR title></a></div> +<div class="sched-speakers"><TMPL_VAR speakers> <TMPL_IF note>- <TMPL_VAR note></TMPL_IF note></div> +<TMPL_IF time><span class="sched-duration><TMPL_VAR time></span> minutes</TMPL_IF time> +<TMPL_IF slug> <span class="sched-slug">id:<TMPL_VAR slug></span></TMPL_IF slug> +<TMPL_IF resources> +<ul class="resources"> +<TMPL_VAR resources> +</ul> +</TMPL_IF resources> +</div> diff --git a/templates/script.js b/templates/script.js new file mode 100644 index 00000000..428adf3a --- /dev/null +++ b/templates/script.js @@ -0,0 +1,227 @@ +// @license magnet:?xt=urn:btih:0b31508aeb0634b347b8270c7bee4d411b5d4109&dn=agpl-3.0.txt AGPL-3.0-or-later + /* + + SeekToTime - simple script to add video time jump functionality to timestamp links + Copyright (C) 2020 Grant Shangreaux + + This program is free software: you can redistribute it and/or modify + it under the terms of the GNU Affero General Public License as + published by the Free Software Foundation, either version 3 of the + License, or (at your option) any later version. + + This program is distributed in the hope that it will be useful, + but WITHOUT ANY WARRANTY; without even the implied warranty of + MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the + GNU Affero General Public License for more details. + + You should have received a copy of the GNU Affero General Public License + along with this program. If not, see <https://www.gnu.org/licenses/>. + + This script enables wiki editors to create anchor tags with the class "time-link" + that will be parsed for seeking to specific time stamps in the main video on a page. + The tag should look like this: + + <a href="#mainVideo" class="time-link">mm:ss</a> + + This could be extended to accept hours in the time stamp as well, but currently does not. + */ + let timestamps; + + // expects a string like "mm:ss.mmm" + function parseSeconds(timeString) { + return timeString.split(":").reduce(function(prev, o) { + return prev * 60 + parseFloat(o); + }, 0); + } + + function handleSubtitleClick(event) { + var video = event.target.getAttribute('data-video'); + var start = event.target.getAttribute('data-start'); + var videoElem = document.getElementById(video); + if (videoElem) { + videoElem.currentTime = parseSeconds(start); + videoElem.scrollIntoView(); + } + if (event.preventDefault) { + event.preventDefault(); + } + } + + window.onload = function initScript() { + let subtitles = document.getElementsByClassName('subtitle'); + for (let i = 0; i < subtitles.length; i++) { + subtitles[i].onclick = handleSubtitleClick; + } + } +// @license-end + // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0 + // Copyright (C) 2021, 2022 Sacha Chua + + if (document.querySelector('.times')) { + var dateOptions = {dateStyle: 'short', timeStyle: 'short'}; + var localStart = (new Date(document.querySelector('.times').getAttribute('start'))).toLocaleString([], dateOptions); + var localEnd = (new Date(document.querySelector('.times').getAttribute('end'))).toLocaleString([], dateOptions); + var dateElem = document.createElement('div'); + dateElem.appendChild(document.createTextNode('Your local time: ~ ' + localStart + ' to ~ ' + localEnd)); + document.querySelector('.times').prepend(dateElem); + if (document.querySelector('.times').querySelector('.others')) { + document.querySelector('.times').querySelector('.others').style.display = 'none'; + } + } + if (document.querySelector('.time-overlay')) { + document.querySelectorAll('.time-overlay').forEach(function (o) { + if (o.getAttribute('title')) return; + var dateOptions = {dateStyle: 'short', timeStyle: 'short'}; + var localStart, localEnd; + if (o.getAttribute('start') && o.getAttribute('end')) { + localStart = (new Date(o.getAttribute('start'))).toLocaleString([], dateOptions); + localEnd = (new Date(o.getAttribute('end'))).toLocaleString([], dateOptions); + o.setAttribute('title', 'Your local time: ~ ' + localStart + ' to ~ ' + localEnd); + } else if (o.getAttribute('start')) { + localStart = (new Date(o.getAttribute('start'))).toLocaleString([], dateOptions); + o.setAttribute('title', 'Your local time: ~ ' + localStart); + } + }); + } + + if (document.querySelector('a[name=transcript]')) { + var transcriptLink = document.createElement('a'); + transcriptLink.setAttribute('href', '#transcript'); + transcriptLink.textContent = 'View transcript'; + var video = document.querySelector('.mainVideo video'); + if (video) { + var resources = document.querySelector('.mainVideo video').closest('.vid').querySelector('.resources'); + var transcriptDiv = document.createElement('div'); + transcriptDiv.appendChild(transcriptLink) + if (resources) { resources.prepend(transcriptDiv); } + } + } + var chat = document.querySelector('.chat-iframe'); + if (chat) { + if (chat.getAttribute('data-track')) { + chat.innerHTML = '<iframe src="https://chat.emacsconf.org?join=emacsconf,emacsconf-' + + chat.getAttribute('data-track').replace(/[^A-Za-z]/g, '') + '" height="600" width="100%"></iframe>'; + } else { + chat.innerHTML = '<iframe src="https://chat.emacsconf.org" height="600" width="100%"></iframe>'; + } + } + +// @license-end + // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0 + // Copyright (c) 2021 Sacha Chua - CC0 Public Domain + function displayChapters(elem) { + var i; + var chapter; + var list = document.createElement('ol'); + list.setAttribute('class', 'chapters'); + var link; + var target = elem.getAttribute('data-target'); + var video = document.getElementById(target); + var track; + if (video) { + track = video.addTextTrack('chapters'); + track.mode = 'hidden'; + } + var chapters = elem.textContent.split(/[ \t]*\n+[ \t]*/).forEach(function(line) { + var m = (line.match(/^(((?:[0-9]+:)?[0-9]+:[0-9]+)(?:\.[0-9]+))[ \t]+(.*)/)); + if (m) { + var start = m[1]; + var text = m[3]; + chapter = document.createElement('li'); + link = document.createElement('a'); + link.setAttribute('href', '#'); + link.setAttribute('data-video', target); + link.setAttribute('data-start', start); + link.setAttribute('data-start-s', parseSeconds(start)); + link.appendChild(document.createTextNode(m[2] + ' ' + text)); + link.onclick = handleSubtitleClick; + chapter.appendChild(link); + list.appendChild(chapter); + if (track) { + var time = parseSeconds(start); + if (track.cues.length > 0) { + track.cues[track.cues.length - 1].endTime = time - 1; + } + track.addCue(new VTTCue(time, time, text)); + } + } + }) + if (track && track.cues.length > 0) { + video.addEventListener('durationchange', function() { + track.cues[track.cues.length - 1].endTime = video.duration; + }); + track.addEventListener('cuechange', function() { + if (!this.activeCues[0]) return; + if (list.querySelector('.current')) { + list.querySelector('.current').className = ''; + } + var chapter; + if (chapter = list.querySelector('a[data-start-s="' + this.activeCues[0].startTime + '"]')) { + chapter.parentNode.className = 'current'; + } + }); + } + elem.parentNode.replaceChild(list, elem); + } + + document.querySelectorAll('pre.chapters').forEach(displayChapters); + + var video = document.querySelector('video.reload'); + if (video) { + var myVar = setInterval(reloadAsNeeded, 1000); + var oldTime = ''; + function reloadAsNeeded() { + if ((video.paused != true && (video.currentTime - oldTime) == 0 && video.currentTime != 0)) { + var source = video.querySelector('source'); + var oldVideo = source.src; + source.src = ''; + source.src = oldVideo; + video.load(); + video.play(); + } + oldTime = video.currentTime; + }; + } + + /* videoType: mainVideo, qanda */ + function addStickyVideo(videoType) { + const transcriptDiv = document.querySelector('.transcript-' + videoType); + const video = document.querySelector('.vid.' + videoType + ' video'); + if (!video || !transcriptDiv) return; + if (transcriptDiv.querySelector('.vid')) + transcriptDiv.querySelector('.vid').remove(); + // already has it + // TODO: Make a copy of the video and place it at the start of the btranscript div, positioned to the left, and sticky, but only on large screens. + const videoCopy = video.cloneNode(true); + transcriptDiv.prepend(videoCopy); + videoCopy.classList.add('sticky-video'); + // TODO: fix the ID + + } + + + + // @license-end + // @license magnet:?xt=urn:btih:90dc5c0be029de84e523b9b3922520e79e0e6f08&dn=cc0.txt txt CC0-1.0 + // Copyright (c) 2023 Sacha Chua - CC0 Public Domain + function highlightTalks() { + // highlight any talk mentioned in the highlight URL parameter + var params = new URLSearchParams(window.location.search); + if (!params.get('highlight')) return; + var talks = params.get('highlight').split(',').filter(function(o) { return o.match(/^[-a-z0-9]+$/); }); + var regexp = new RegExp('/talks/(' + talks.join('|') + ')/?$'); + document.querySelectorAll('a[href]').forEach(function(link) { + console.debug(link.getAttribute('href'), link.getAttribute('href').match(regexp)); + if (link.getAttribute('href').match(regexp)) { + console.debug(link); + link.classList.add('highlight'); + } + }); + } + + addEventListener('DOMContentLoaded', highlightTalks); + addEventListener('DOMContentLoaded', function() { + addStickyVideo('mainVideo'); + addStickyVideo('qanda'); + }); + // @license-end diff --git a/templates/subtitle.md b/templates/subtitle.md index 67906b4b..b4e273c1 100644 --- a/templates/subtitle.md +++ b/templates/subtitle.md @@ -1,3 +1,3 @@ <TMPL_IF new> -<a href="#<TMPL_VAR video>" class="subtitle" data-start="<TMPL_VAR start>" data-video="<TMPL_VAR video>">[<TMPL_VAR start>]</a> <span class="subtitle" data-start="<TMPL_VAR start>" title="<TMPL_VAR start">" data-video="<TMPL_VAR video>"><TMPL_VAR text></span><TMPL_ELSE><span class="subtitle" title="<TMPL_VAR start>" data-start="<TMPL_VAR start>" data-video="<TMPL_VAR video>"><TMPL_VAR text></span></TMPL_IF>
\ No newline at end of file +<a href="#<TMPL_VAR video>" class="subtitle" data-start="<TMPL_VAR start>" data-video="<TMPL_VAR video>">[<TMPL_VAR start>]</a> <span class="subtitle" data-start="<TMPL_VAR start>" title="<TMPL_VAR start">" data-video="<TMPL_VAR video>"><TMPL_VAR text></span><TMPL_ELSE><TMPL_IF time><a href="#<TMPL_VAR video>" class="subtitle" data-start="<TMPL_VAR start>" data-video="<TMPL_VAR video>">[<TMPL_VAR start>]</a> </TMPL_IF time><span class="subtitle" title="<TMPL_VAR start>" data-start="<TMPL_VAR start>" data-video="<TMPL_VAR video>"><TMPL_VAR text></span></TMPL_IF>
\ No newline at end of file diff --git a/templates/time.md b/templates/time.md new file mode 100644 index 00000000..b3f3c90e --- /dev/null +++ b/templates/time.md @@ -0,0 +1 @@ +<span class="time-overlay" data-start="<TMPL_VAR startutc>" data-end="<TMPL_VAR endutc>"><TMPL_VAR time></span> diff --git a/templates/vid.md b/templates/vid.md index 23c31285..2a48e3a0 100644 --- a/templates/vid.md +++ b/templates/vid.md @@ -1,11 +1,13 @@ -<div class="vid"> -<video controls preload="metadata" id="<TMPL_VAR vidid>"> -<source src="<TMPL_VAR src>" type="<TMPL_VAR type>" /> +<div class="vid" data-id="<TMPL_VAR vidid>"> +<video controls preload="metadata" id="<TMPL_VAR vidid>" poster="<TMPL_VAR poster>"> +<source src="<TMPL_VAR src>" type="<TMPL_VAR type>" /><TMPL_VAR captions> <TMPL_IF subtitles> <track label="English" kind="captions" srclang="en" src="<TMPL_VAR subtitles>" default /> </TMPL_IF> <p><em>Your browser does not support the video tag, please download the video instead.</em></p> </video> +<div class="resources"> + <a href="<TMPL_VAR src>"><TMPL_IF download><TMPL_VAR download><TMPL_ELSE>Download video</TMPL_IF><TMPL_IF duration>, <TMPL_VAR duration></TMPL_IF><TMPL_IF size>, <TMPL_VAR size></TMPL_IF></a><br /> + <TMPL_IF subtitles><a href="<TMPL_VAR subtitles>">Download captions</a><br /></TMPL_IF><TMPL_VAR other_resources> +</div> </div> -<a href="<TMPL_VAR src>"><TMPL_IF download><TMPL_VAR download><TMPL_ELSE>Download video</TMPL_IF><TMPL_IF duration>, <TMPL_VAR duration></TMPL_IF><TMPL_IF size>, <TMPL_VAR size></TMPL_IF></a> -<TMPL_IF subtitles><a href="<TMPL_VAR subtitles>">Download captions</a> </TMPL_IF>
\ No newline at end of file |