LBRYCommunity/spee.ch
1
0
Fork 0
Code Issues 95 Pull requests 2 Projects Releases 4 Packages Wiki Activity

added click and space bar play/pause for videos

Browse source
This commit is contained in:
bill bittner 2017-10-17 10:10:26 -07:00
parent 726117f3c0
commit 5013a09230
7 changed files with 54 additions and 29 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

4
public/assets/css/general.css
View file

@ -492,8 +492,8 @@ table {
width: 100%; width: 100%;
} }
.video-show { #video-player {
cursor: pointer;
} }
/* item lists */ /* item lists */

23
public/assets/js/showFunctions.js Normal file
View file

@ -0,0 +1,23 @@
function playOrPause(video){
if (video.paused == true) {
video.play();
}
else{
video.pause();
}
}
// if a video player is present, set the listeners
const video = document.getElementById('video-player');
if (video) {
// add event listener for click
video.addEventListener('click', ()=> {
playOrPause(video);
});
// add event listener for space bar
document.body.onkeyup = (event) => {
if (event.keyCode == 32) {
playOrPause(video);
}
};
}

1
views/layouts/show.handlebars
View file

@ -26,6 +26,7 @@
<div class="page-contents"> <div class="page-contents">
{{{ body }}} {{{ body }}}
</div> </div>
<script src="/assets/js/showFunctions.js"></script>
</body> </body>
</html> </html>

1
views/layouts/showlite.handlebars
View file

@ -18,6 +18,7 @@
</head> </head>
<body> <body>
{{{ body }}} {{{ body }}}
<script src="/assets/js/showFunctions.js"></script>
</body> </body>
</html> </html>

8
views/partials/asset.handlebars
View file

@ -1,4 +1,3 @@
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}} {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
{{#ifConditional fileInfo.fileExt '===' 'gifv'}} {{#ifConditional fileInfo.fileExt '===' 'gifv'}}
<video class="gifv-show" autoplay loop muted> <video class="gifv-show" autoplay loop muted>
@ -7,13 +6,14 @@
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
{{else}} {{else}}
<video class="video-show" controls poster="{{fileInfo.thumbnail}}"> <video id="video-player" class="video-show" controls poster="{{fileInfo.thumbnail}}">
<source src="/media/{{fileInfo.fileName}}"> <source src="/media/{{fileInfo.fileName}}">
{{!--fallback--}} {{!--fallback--}}
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
{{/ifConditional}} {{/ifConditional}}
{{else}} {{else}}
<img class="image-show" src="/media/{{fileInfo.fileName}}" /> <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}">
<img class="image-show" src="/media/{{fileInfo.fileName}}" />
</a>
{{/ifConditional}} {{/ifConditional}}
</a>

2
views/partials/assetInfo.handlebars
View file

@ -5,7 +5,7 @@
<div class="row row--wide"> <div class="row row--wide">
<div id="show-short-link"> <div id="show-short-link">
<div class="column column--2 column--sml-10"> <div class="column column--2 column--sml-10">
<span class="label">Link:</span> <a href="/{{fileInfo.shortId}}/{{fileInfo.name}}.{{fileInfo.fileExt}}"><span class="label">Link:</span></a>
</div><div class="column column--8 column--sml-10"> </div><div class="column column--8 column--sml-10">
<div class="row row--short row--wide"> <div class="row row--short row--wide">
<div class="column column--7"> <div class="column column--7">

42
views/showLite.handlebars
View file

@ -1,21 +1,21 @@
<div id="asset-placeholder"> {{#ifConditional fileInfo.fileType '===' 'video/mp4'}}
<a href="/{{fileInfo.claimId}}/{{fileInfo.name}}"> {{#ifConditional fileInfo.fileExt '===' '.gifv'}}
{{#ifConditional fileInfo.fileType '===' 'video/mp4'}} <video class="show-asset-light" autoplay loop muted>
{{#ifConditional fileInfo.fileExt '===' '.gifv'}} <source src="/media/{{fileInfo.fileName}}">
<video class="show-asset-light" autoplay loop muted> {{!--fallback--}}
<source src="/media/{{fileInfo.fileName}}"> Your browser does not support the <code>video</code> element.
{{!--fallback--}} </video>
Your browser does not support the <code>video</code> element. {{else}}
</video> <video class="show-asset-light" controls id="video-player">
{{else}} <source src="/media/{{fileInfo.fileName}}">
<video class="show-asset-light" autoplay controls> {{!--fallback--}}
<source src="/media/{{fileInfo.fileName}}"> Your browser does not support the <code>video</code> element.
{{!--fallback--}} </video>
Your browser does not support the <code>video</code> element. {{/ifConditional}}
</video> <br/>
{{/ifConditional}} hosted via <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}">spee&lt;h</a>
{{else}} {{else}}
<img class="show-asset-lite" src="/media/{{fileInfo.fileName}}" alt="{{fileInfo.fileName}}"/> <a href="/{{fileInfo.claimId}}/{{fileInfo.name}}">
{{/ifConditional}} <img class="show-asset-lite" src="/media/{{fileInfo.fileName}}" alt="{{fileInfo.fileName}}"/>
</a> </a>
</div> {{/ifConditional}}