spee.ch/views/partials/asset.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>