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%;
}
.video-show {
#video-player {
cursor: pointer;
}
/* 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">
{{{ body }}}
</div>
<script src="/assets/js/showFunctions.js"></script>
</body>
</html>

1
views/layouts/showlite.handlebars
View file

@ -18,6 +18,7 @@
</head>
<body>
{{{ body }}}
<script src="/assets/js/showFunctions.js"></script>
</body>
</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.fileExt '===' 'gifv'}}
<video class="gifv-show" autoplay loop muted>
@ -7,13 +6,14 @@
Your browser does not support the <code>video</code> element.
</video>
{{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}}">
{{!--fallback--}}
Your browser does not support the <code>video</code> element.
</video>
{{/ifConditional}}
{{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}}
</a>

2
views/partials/assetInfo.handlebars
View file

@ -5,7 +5,7 @@
<div class="row row--wide">
<div id="show-short-link">
<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 class="row row--short row--wide">
<div class="column column--7">

42
views/showLite.handlebars
View file

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