removed video thumnail attempt
This commit is contained in:
parent
c8a545cc34
commit
2a99cef1ce
8 changed files with 15 additions and 86 deletions
|
@ -122,8 +122,7 @@ button.copy-button {
|
|||
height: 6em;
|
||||
}
|
||||
|
||||
#asset-preview {
|
||||
display: none;
|
||||
#asset-preview-holder {
|
||||
width: 100%;
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
|
@ -66,79 +66,13 @@ function validateClaimName (name) {
|
|||
return deferred;
|
||||
}
|
||||
|
||||
function captureScreenshot(file){
|
||||
console.log(file);
|
||||
var deferred = new Promise(function(resolve, reject) {
|
||||
// create elements
|
||||
var canvas = document.createElement('canvas');
|
||||
canvas.class="snapshot-generator" ;
|
||||
canvas.id="canvasElem";
|
||||
document.body.appendChild(canvas);
|
||||
canvas = document.getElementById('canvasElem');
|
||||
|
||||
var video = document.createElement('video');
|
||||
video.class="snapshot-generator";
|
||||
video.id="video";
|
||||
video.muted = true;
|
||||
document.body.appendChild(video);
|
||||
video = document.getElementById('video');
|
||||
|
||||
// load the video
|
||||
var metadataLoaded = false;
|
||||
var dataLoaded = false;
|
||||
var suspendDone = false;
|
||||
function stepTwoCheck() {
|
||||
if (metadataLoaded && dataLoaded && suspendDone) {
|
||||
stepThree();
|
||||
}
|
||||
}
|
||||
video.src = '#'; // file source here
|
||||
video.addEventListener('loadedmetadata', function() {
|
||||
metadataLoaded = true;
|
||||
stepTwoCheck();
|
||||
});
|
||||
video.addEventListener('loadeddata', function() {
|
||||
dataLoaded = true;
|
||||
stepTwoCheck();
|
||||
});
|
||||
video.addEventListener('suspend', function() {
|
||||
suspendDone = true;
|
||||
stepTwoCheck();
|
||||
});
|
||||
video.addEventListener('seeked', function(){
|
||||
stepFour();
|
||||
})
|
||||
// set the time
|
||||
function stepThree(){
|
||||
video.currentTime = 1;
|
||||
};
|
||||
// grab the snapshot
|
||||
function stepFour(){
|
||||
canvas.height = video.videoHeight;
|
||||
canvas.width = video.videoWidth;
|
||||
canvas.msGetInputContext('2d').drawImage(video, 0 , 0);
|
||||
var snapshot = canvas.toDataUrl();
|
||||
video.remove;
|
||||
canvas.remove;
|
||||
resolve(snapshot);
|
||||
}
|
||||
});
|
||||
return deferred;
|
||||
}
|
||||
|
||||
/* regular publish helper functions */
|
||||
|
||||
function previewAndStageFile(selectedFile){
|
||||
var preview = document.getElementById('asset-preview');
|
||||
var previewHolder = document.getElementById('asset-preview-holder');
|
||||
var dropzone = document.getElementById('drop-zone');
|
||||
var previewReader = new FileReader();
|
||||
var nameInput = document.getElementById('publish-name');
|
||||
// set the preview after reading the asset
|
||||
previewReader.onloadend = function () {
|
||||
preview.style.display = 'block';
|
||||
dropzone.style.display = 'none';
|
||||
preview.src = previewReader.result;
|
||||
};
|
||||
// validate the file
|
||||
try {
|
||||
validateFile(selectedFile);
|
||||
|
@ -146,22 +80,18 @@ function previewAndStageFile(selectedFile){
|
|||
alert(error.message);
|
||||
return;
|
||||
}
|
||||
// read the data (when completed, it will trigger the asset preview)
|
||||
// set the preview
|
||||
if (selectedFile.type === 'video/mp4') {
|
||||
captureScreenshot(selectedFile)
|
||||
.then(function (snapshot) {
|
||||
console.log(test)
|
||||
preview.style.display = 'block';
|
||||
dropzone.style.display = 'none';
|
||||
preview.src = snapshot;
|
||||
})
|
||||
.catch(function (error) {
|
||||
alert(error);
|
||||
})
|
||||
|
||||
} else {
|
||||
previewReader.readAsDataURL(selectedFile);
|
||||
}
|
||||
previewReader.onloadend = function () {
|
||||
dropzone.style.display = 'none';
|
||||
previewHolder.style.display = 'block';
|
||||
previewHolder.innerHTML = '<img width="100%" src="' + previewReader.result + '" alt="image preview"/>';
|
||||
|
||||
};
|
||||
}
|
||||
// set the name input value to the image name if none is set yet
|
||||
if (nameInput.value === "") {
|
||||
nameInput.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
|
||||
|
|
|
@ -10,4 +10,4 @@
|
|||
<script src="/siofu/client.js"></script>
|
||||
|
||||
<script src="/assets/js/publishFunctions.js"></script>
|
||||
<script src="/assets/js/claimPublish.js"></script>
|
||||
<script src="/assets/js/index.js"></script>
|
||||
|
|
|
@ -10,5 +10,5 @@
|
|||
<script src="/socket.io/socket.io.js"></script>
|
||||
<script src="/siofu/client.js"></script>
|
||||
|
||||
<script src="/assets/js/memeDraw.js"></script>
|
||||
<script src="/assets/js/memePublish.js"></script>
|
||||
<script src="/assets/js/memeFodder-draw.js"></script>
|
||||
<script src="/assets/js/memeFodder-publish.js"></script>
|
|
@ -6,7 +6,7 @@
|
|||
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||
</div>
|
||||
<div id="asset-preview-holder">
|
||||
<img id="asset-preview" src="" alt="asset preview"/>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-right">
|
||||
|
|
Loading…
Reference in a new issue