diff options
| -rw-r--r-- | posts/2015-10-07-rosa-rosa-rosam.md | 2 | ||||
| -rw-r--r-- | style.css | 9 | ||||
| -rw-r--r-- | templates/article.html | 12 | ||||
| -rw-r--r-- | templates/load-webtorrent.html | 2 | ||||
| -rw-r--r-- | templates/thumbs.html | 12 | ||||
| -rw-r--r-- | templates/video-player.html | 11 |
6 files changed, 26 insertions, 22 deletions
diff --git a/posts/2015-10-07-rosa-rosa-rosam.md b/posts/2015-10-07-rosa-rosa-rosam.md index 07f260b..4f7af20 100644 --- a/posts/2015-10-07-rosa-rosa-rosam.md +++ b/posts/2015-10-07-rosa-rosa-rosam.md @@ -1,6 +1,6 @@ --- title: Rosa Rosa Rosam -torrent: magnet:?xt=urn:btih:dac04356dbd7cce8337751366b0f36cbd1b40e00&dn=keitai.mp4&tr=wss%3A%2F%2Ftracker.bunny.garden&tr=https%3A%2F%2Ftracker.bunny.garden%2Fannounce&tr=udp%3A%2F%2Ftracker.bunny.garden%3A1337 +torrent: magnet:?xt=urn:btih:5135350e62045e14a66659519ee3baee7d91f94d&dn=keitai&tr=wss%3A%2F%2Ftracker.bunny.garden&tr=https%3A%2F%2Ftracker.bunny.garden%2Fannounce&tr=udp%3A%2F%2Ftracker.bunny.garden%3A1337 author: Ovidius --- @@ -205,12 +205,21 @@ article { /* margin: auto; */ } +.thumb .thumbnail { + height: 20vh; +} + +article .thumbnail { + height: 30vh; +} + .thumbnail { filter: drop-shadow(0px 0px 4px #e3b69b); border: 4px groove #800080; background-color: #06360f; /* aspect-ratio: 16 / 10; */ width: auto; + box-sizing: border-box; max-width: min(100%, 100vw); padding: 0vw; } diff --git a/templates/article.html b/templates/article.html index 3de52e4..2aa24f2 100644 --- a/templates/article.html +++ b/templates/article.html @@ -3,15 +3,7 @@ <div class="thumbnail" style="height: 30vh;">$thumbnail$</div> $endif$ $if(torrent)$ - <video controls class="thumbnail" id="media-$id$" style="height: 30vh;"></video> - <script type='module'> - const torrentId = '$torrent$'; - const player = document.querySelector('#media-$id$'); - window.torrentClient.add(torrentId, torrent => { - const file = torrent.files.find(file => file.name.endsWith('.mp4')); - file.streamTo(player); - }); - </script> + $partial("templates/video-player.html")$ $endif$ <div class="panel"> <section class="header"> @@ -39,4 +31,4 @@ $body$ </section> </div> -</article> +</article>
\ No newline at end of file diff --git a/templates/load-webtorrent.html b/templates/load-webtorrent.html index 0d7347f..f63aa41 100644 --- a/templates/load-webtorrent.html +++ b/templates/load-webtorrent.html @@ -6,4 +6,4 @@ navigator.serviceWorker.register('/sw.min.js'); const controller = await navigator.serviceWorker.ready; window.torrentClient.createServer({controller}); -</script> +</script>
\ No newline at end of file diff --git a/templates/thumbs.html b/templates/thumbs.html index 6070c23..cadbbc7 100644 --- a/templates/thumbs.html +++ b/templates/thumbs.html @@ -6,15 +6,7 @@ <br> $endif$ $if(torrent)$ - <video controls class="thumbnail" id="media-$id$" style="height: 20vh;"></video> - <script type='module'> - const torrentId = '$torrent$'; - const player = document.querySelector('#media-$id$'); - window.torrentClient.add(torrentId, torrent => { - const file = torrent.files.find(file => file.name.endsWith('.mp4')); - file.streamTo(player); - }); - </script> + $partial("templates/video-player.html")$ $endif$ <div class="thumb-title"> <a href="$url$"> @@ -40,4 +32,4 @@ $endif$ </div> $endfor$ -</div>
\ No newline at end of file +</div> diff --git a/templates/video-player.html b/templates/video-player.html new file mode 100644 index 0000000..fd508a8 --- /dev/null +++ b/templates/video-player.html @@ -0,0 +1,11 @@ +<video id="media-$id$" class="thumbnail" controls preload="metadata"></video> +<script type='module'> + const torrentId = '$torrent$'; + const player = document.querySelector('#media-$id$'); + window.torrentClient.add(torrentId, torrent => { + const thumbnail = torrent.files.find(file => file.name.endsWith('.jpg')).streamURL; + player.setAttribute("poster", thumbnail); + const videofile = torrent.files.find(file => file.name.endsWith('.mp4')); + videofile.streamTo(player); + }); +</script> |