spee.ch/views/partials/asset.handlebars

<div id="asset-display-component">
    <div id="asset-status">
        <p id="searching-message" hidden="true">Sit tight, we're combing the LBRY blockchain for your asset!</p>
        <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>
            <i><p id="error-message"></p></i>
        </div>
    </div>
    <div id="asset-holder" hidden="true">
        {{#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>

    </div>
</div>

<script type="text/javascript">

    const getAssetFunctions = {
        showAsset: function () {
            this.hideAssetStatus();
            this.showAssetHolder();
            {{#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}}");
        },
        hideAssetStatus: function () {
            const assetStatus = document.getElementById('asset-status');
            assetStatus.hidden = true;
        },
        showAssetHolder: function () {
            const assetHolder = document.getElementById('asset-holder');
            assetHolder.hidden = false;
        },
        showSearchMessage: function () {
            const searchMessage = document.getElementById('searching-message');
            searchMessage.hidden = false;
        },
        showFailureMessage: function (msg) {
            console.log(msg);
            const searchMessage = document.getElementById('searching-message');
            const failureMessage = document.getElementById('failure-message');
            const errorMessage = document.getElementById('error-message');
            searchMessage.hidden = true;
            failureMessage.hidden = false;
            errorMessage.innerText = msg;
        },
        checkClaimAvailability: function (claimName, claimId) {
            console.log(`checking local availability for ${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);
                        that.showAsset();
                    } 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();
        },
        checkIfAssetIsFullyDownloaded: function(claimName, claimId) {
            // make a get request, and see fi the asset is fully downloaded.
            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');
                        } else {
                            console.log('lbrynet has not finished downloading the asset');
                            setTimeout(that.checkIfAssetIsFullyDownloaded.bind(that, claimName, claimId), 5000);
                        }
                    } else {
                        console.log('get failed:', response);
                    }
                } else {
                    console.log('xhr.readyState', xhr.readyState);
                }
            };
            xhr.send();
        }
    }

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

</script>