84 lines
No EOL
3.3 KiB
Handlebars
84 lines
No EOL
3.3 KiB
Handlebars
{{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
|
|
{{#ifConditional claimInfo.fileExt '===' 'gifv'}}
|
|
<video class="gifv-show" autoplay loop muted>
|
|
<source src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
|
|
{{!--fallback--}}
|
|
Your browser does not support the <code>video</code> element.
|
|
</video>
|
|
{{else}}
|
|
<video id="video-player" class="video-show video" controls poster="{{claimInfo.thumbnail}}">
|
|
<source src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
|
|
{{!--fallback--}}
|
|
Your browser does not support the <code>video</code> element.
|
|
</video>
|
|
<script type="text/javascript">
|
|
document.addEventListener('DOMContentLoaded', resizeVideoPlayer)
|
|
window.addEventListener("resize", resizeVideoPlayer);
|
|
function resizeVideoPlayer() {
|
|
const div = document.getElementById('video-player');
|
|
const width = div.offsetWidth;
|
|
div.height = (width * 9 / 16);
|
|
}
|
|
</script>
|
|
{{/ifConditional}}
|
|
{{else}}
|
|
<a href="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}">
|
|
<img class="image-show" src="/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}" />
|
|
</a>
|
|
{{/ifConditional}}
|
|
|
|
<div id="asset-holder">
|
|
<div id="search-message" hidden="true">
|
|
<p>We're currently combing the blockchain for your asset!</p>
|
|
</div>
|
|
<div id="failure-message" hidden="true">
|
|
<p>Hmmm, looks like no peers have your content. How anti-social!</p>
|
|
</div>
|
|
<div id="asset" hidden="true">
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
|
|
const getAssetFunctions = {
|
|
showAsset: function () {
|
|
const searchMessage = document.getElementById('search-message');
|
|
const asset = document.getElementById('asset');
|
|
searchMessage.hidden = true;
|
|
asset.hidden = false;
|
|
},
|
|
showFailureMessage: function (msg) {
|
|
console.log(msg);
|
|
const searchMessage = document.getElementById('search-message');
|
|
const failureMessage = document.getElementById('failure-message');
|
|
searchMessage.hidden = true;
|
|
failureMessage.hidden = false;
|
|
},
|
|
displayAsset: function(contentType, source) {
|
|
|
|
},
|
|
getAsset: function(claimName, claimId) {
|
|
console.log(`getting ${claimName}#${claimId}}`)
|
|
var uri = `/api/get/${claimName}/${claimId}`;
|
|
var xhr = new XMLHttpRequest();
|
|
xhr.open("GET", uri, true);
|
|
xhr.onreadystatechange = function() {
|
|
if (xhr.readyState == 4) {
|
|
if (xhr.status == 200) {
|
|
console.log('get returned successfully', xhr.response);
|
|
this.showAsset();
|
|
} else {
|
|
console.log('get failed:', xhr.response);
|
|
}
|
|
} else {
|
|
console.log('xhr.readyState', xhr.readyState);
|
|
this.showFailureMessage(xhr.readyState.message);
|
|
}
|
|
};
|
|
// Initiate a multipart/form-data upload
|
|
xhr.send();
|
|
},
|
|
}
|
|
|
|
</script> |