spee.ch/views/partials/asset.handlebars

<div id="asset-display-component">
    <p id="searching-message" hidden="true">We're currently combing the blockchain for your asset!</p>
    <p id="in-progress-message" hidden="true"></p>
    <p id="failure-message" hidden="true"></p>
    <div id="asset-holder">
        {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
            {{> video}}
        {{else}}
            {{> image}}
        {{/ifConditional}}
    </div>
    <a id="asset-boilerpate" class="link--primary fine-print" href="/{{claimInfo.claimId}}/{{claimInfo.name}}">hosted via Spee&lt;h</a>
</div>

<script type="text/javascript">

    const getAssetFunctions = {
        showAsset: function () {
            this.hideMessages();
            {{#ifConditional claimInfo.contentType '===' 'video/mp4'}}
                this.showVideo();
            {{else}}
                this.showImage();
            {{/ifConditional}}
        },
        showVideo: function () {
            console.log('showing video');
            const video = document.getElementById('video-asset');
            const source = document.createElement('source');
            source.setAttribute('src', '/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}');
            video.appendChild(source);
            video.play();
        },
        showImage: function () {
            console.log('showing image');
            const asset = document.getElementById('image-asset');
            asset.setAttribute('src', "/{{claimInfo.claimId}}/{{claimInfo.name}}.{{claimInfo.fileExt}}");
        },
        hideMessages: function () {
            const searchMessage = document.getElementById('searching-message');
            const inProgressMessage = document.getElementById('in-progress-message');
            searchMessage.hidden = true;
            inProgressMessage.hidden = true;
        },
        showSearchMessage: function () {
            const searchMessage = document.getElementById('searching-message');
            searchMessage.hidden = false;
        },
        showInProgressMessage: function (msg) {
            const searchMessage = document.getElementById('searching-message');
            const inProgressMessage = document.getElementById('in-progress-message');
            searchMessage.hidden = true;
            inProgressMessage.hidden = false;
            inProgressMessage.innerText = msg;
        },
        showFailureMessage: function (msg) {
            console.log(msg);
            const searchMessage = document.getElementById('searching-message');
            const failureMessage = document.getElementById('failure-message');
            searchMessage.hidden = true;
            failureMessage.hidden = false;
            failureMessage.innerText = msg;
        },
        checkClaimAvailability: function (claimName, claimId) {
            console.log(`getting ${claimName}#${claimId}`)
            var uri = `/api/check_local_claim/${claimName}/${claimId}`;
            var xhr = new XMLHttpRequest();
            var that = this;
            xhr.open("GET", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    const response = JSON.parse(xhr.response);
                    if (xhr.status == 200) {
                        if (response.message === true) {
                            console.log('local asset is available on spee.ch')
                            that.showAsset();
                        } else {
                            that.showSearchMessage();
                            that.getAsset(claimName, claimId)
                        }
                    } else {
                        console.log('get failed:', response);
                        that.showFailureMessage('Well this sucks, but we can\'t seem to phone home');
                    }
                } else {
                    console.log('xhr.readyState', xhr.readyState);
                }
            };
            // Initiate a multipart/form-data upload
            xhr.send();
        },
        getAsset: function(claimName, claimId) {
            console.log(`getting ${claimName}#${claimId}`)
            var uri = `/api/get_claim/${claimName}/${claimId}`;
            var xhr = new XMLHttpRequest();
            var that = this;
            xhr.open("GET", uri, true);
            xhr.onreadystatechange = function() {
                if (xhr.readyState == 4) {
                    const response = JSON.parse(xhr.response);
                    if (xhr.status == 200) {
                        console.log('get returned successfully', response);
                        if (response.completed === true) {
                            console.log('lbrynet has finished downloading the asset');
                            that.showAsset();
                        } else {
                            console.log('lbrynet is still downloading the asset');
                            that.showInProgressMessage(response.message);
                            setTimeout(that.getAsset, 5000);
                        }
                    } else {
                        console.log('get failed:', response);
                        that.showFailureMessage(`${response.message}`);
                    }
                } else {
                    console.log('xhr.readyState', xhr.readyState);
                }
            };
            // Initiate a multipart/form-data upload
            xhr.send();
        },
    }

    getAssetFunctions.checkClaimAvailability('{{claimInfo.name}}', '{{claimInfo.claimId}}');

</script>