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

fixed the play/pause functionality on videos

Browse source
This commit is contained in:
bill bittner 2017-11-29 16:02:40 -08:00
parent 15999c6a84
commit e5d3fdf322
5 changed files with 33 additions and 27 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

33
public/assets/js/showFunctions.js
View file

@ -1,4 +1,21 @@
function playOrPause(video){ const showFunctions = {
addPlayPauseToVideo: function () {
const that = this;
const video = document.getElementById('video-asset');
if (video) {
// add event listener for click
video.addEventListener('click', ()=> {
that.playOrPause(video);
});
// add event listener for space bar
document.body.onkeyup = (event) => {
if (event.keyCode == 32) {
that.playOrPause(video);
}
};
}
},
playOrPause: function(video){
if (video.paused == true) { if (video.paused == true) {
video.play(); video.play();
} }
@ -6,18 +23,4 @@ function playOrPause(video){
video.pause(); 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);
}
};
} }

2
views/layouts/show.handlebars
View file

@ -21,9 +21,9 @@
<body id="show-body"> <body id="show-body">
<script src="/assets/js/generalFunctions.js"></script> <script src="/assets/js/generalFunctions.js"></script>
<script src="/assets/js/navBarFunctions.js"></script> <script src="/assets/js/navBarFunctions.js"></script>
<script src="/assets/js/showFunctions.js"></script>
{{> navBar}} {{> navBar}}
{{{ body }}} {{{ body }}}
<script src="/assets/js/showFunctions.js"></script>
</body> </body>
</html> </html>

2
views/layouts/showlite.handlebars
View file

@ -17,8 +17,8 @@
{{ googleAnalytics }} {{ googleAnalytics }}
</head> </head>
<body id="showlite-body"> <body id="showlite-body">
{{{ body }}}
<script src="/assets/js/showFunctions.js"></script> <script src="/assets/js/showFunctions.js"></script>
{{{ body }}}
</body> </body>
</html> </html>

4
views/partials/asset.handlebars
View file

@ -1,6 +1,6 @@
<div id="asset-display-component"> <div id="asset-display-component">
<div id="asset-status"> <div id="asset-status">
<p id="searching-message" hidden="true">Sit tight, we're combing the LBRY blockchain for your asset!</p> <p id="searching-message" hidden="true">Sit tight, we're searching the LBRY blockchain for your asset!</p>
<div id="failure-message" hidden="true"> <div id="failure-message" hidden="true">
<p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p> <p>Unfortunately, we couldn't download your asset from LBRY. You can help us out by sharing the below error message in the <a class="link--primary" href="https://discord.gg/YjYbwhS" target="_blank">LBRY discord</a>.</p>
<i><p id="error-message"></p></i> <i><p id="error-message"></p></i>
@ -90,7 +90,6 @@
console.log('xhr.readyState', xhr.readyState); console.log('xhr.readyState', xhr.readyState);
} }
}; };
// Initiate a multipart/form-data upload
xhr.send(); xhr.send();
}, },
getAsset: function(claimName, claimId) { getAsset: function(claimName, claimId) {
@ -113,7 +112,6 @@
console.log('xhr.readyState', xhr.readyState); console.log('xhr.readyState', xhr.readyState);
} }
}; };
// Initiate a multipart/form-data upload
xhr.send(); xhr.send();
}, },
} }

5
views/partials/video.handlebars
View file

@ -4,3 +4,8 @@
<!--fallback--> <!--fallback-->
Your browser does not support the <code>video</code> element. Your browser does not support the <code>video</code> element.
</video> </video>
<script type="text/javascript">
showFunctions.addPlayPauseToVideo();
</script>