added thumbnail preview to upload tools
This commit is contained in:
parent
0c11eb4b55
commit
021e98c654
2 changed files with 48 additions and 3 deletions
|
@ -28,7 +28,6 @@
|
||||||
<script src="/assets/js/dropzoneFunctions.js"></script>
|
<script src="/assets/js/dropzoneFunctions.js"></script>
|
||||||
<script src="/assets/js/createChannelFunctions.js"></script>
|
<script src="/assets/js/createChannelFunctions.js"></script>
|
||||||
<script src="/assets/js/navBarFunctions.js"></script>
|
<script src="/assets/js/navBarFunctions.js"></script>
|
||||||
{{> releaseBanner}}
|
|
||||||
{{> navBar}}
|
{{> navBar}}
|
||||||
{{{ body }}}
|
{{{ body }}}
|
||||||
</body>
|
</body>
|
||||||
|
|
|
@ -3,8 +3,54 @@
|
||||||
<label class="label">Thumbnail:</label>
|
<label class="label">Thumbnail:</label>
|
||||||
</div><div class="column column--6 column--sml-10">
|
</div><div class="column column--6 column--sml-10">
|
||||||
<div class="input-text--primary">
|
<div class="input-text--primary">
|
||||||
<input type="text" id="claim-thumbnail-input" class="input-text input-text--full-width" placeholder="https://spee.ch/xyz/example.jpg" value="">
|
<input type="text" id="claim-thumbnail-input" class="input-text input-text--full-width" placeholder="https://spee.ch/xyz/example.jpg" value="" oninput="updateVideoThumb(event)">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<script type="text/javascript">
|
||||||
|
function urlIsAnImage(url) {
|
||||||
|
return(url.match(/\.(jpeg|jpg|gif|png)$/) != null);
|
||||||
|
}
|
||||||
|
|
||||||
|
function testImage(url, timeoutT) {
|
||||||
|
return new Promise(function (resolve, reject) {
|
||||||
|
var timeout = timeoutT || 5000;
|
||||||
|
var timer, img = new Image();
|
||||||
|
img.onerror = img.onabort = function () {
|
||||||
|
clearTimeout(timer);
|
||||||
|
reject("error");
|
||||||
|
};
|
||||||
|
img.onload = function () {
|
||||||
|
clearTimeout(timer);
|
||||||
|
resolve("success");
|
||||||
|
};
|
||||||
|
timer = setTimeout(function () {
|
||||||
|
// reset .src to invalid URL so it stops previous
|
||||||
|
// loading, but doesn't trigger new load
|
||||||
|
img.src = "//!!!!/test.jpg";
|
||||||
|
reject("timeout");
|
||||||
|
}, timeout);
|
||||||
|
img.src = url;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
function updateVideoThumb(event){
|
||||||
|
var videoPreview = document.getElementById('asset-preview');
|
||||||
|
var imageUrl = event.target.value;
|
||||||
|
if (urlIsAnImage(imageUrl)){
|
||||||
|
testImage(imageUrl, 3000)
|
||||||
|
.then(function(result) {
|
||||||
|
if (result === 'success'){
|
||||||
|
videoPreview.src = imageUrl;
|
||||||
|
} else if (result === 'timeout') {
|
||||||
|
console.log('could not resolve the provided thumbnail image url');
|
||||||
|
}
|
||||||
|
})
|
||||||
|
.catch(function(error) {
|
||||||
|
console.log('encountered an error loading thumbnail image url.')
|
||||||
|
})
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</script>
|
Loading…
Reference in a new issue