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;
|
height: 6em;
|
||||||
}
|
}
|
||||||
|
|
||||||
#asset-preview {
|
#asset-preview-holder {
|
||||||
display: none;
|
|
||||||
width: 100%;
|
width: 100%;
|
||||||
margin-bottom: 1em;
|
margin-bottom: 1em;
|
||||||
}
|
}
|
||||||
|
|
|
@ -66,79 +66,13 @@ function validateClaimName (name) {
|
||||||
return deferred;
|
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 */
|
/* regular publish helper functions */
|
||||||
|
|
||||||
function previewAndStageFile(selectedFile){
|
function previewAndStageFile(selectedFile){
|
||||||
var preview = document.getElementById('asset-preview');
|
var previewHolder = document.getElementById('asset-preview-holder');
|
||||||
var dropzone = document.getElementById('drop-zone');
|
var dropzone = document.getElementById('drop-zone');
|
||||||
var previewReader = new FileReader();
|
var previewReader = new FileReader();
|
||||||
var nameInput = document.getElementById('publish-name');
|
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
|
// validate the file
|
||||||
try {
|
try {
|
||||||
validateFile(selectedFile);
|
validateFile(selectedFile);
|
||||||
|
@ -146,22 +80,18 @@ function previewAndStageFile(selectedFile){
|
||||||
alert(error.message);
|
alert(error.message);
|
||||||
return;
|
return;
|
||||||
}
|
}
|
||||||
// read the data (when completed, it will trigger the asset preview)
|
// set the preview
|
||||||
if (selectedFile.type === 'video/mp4') {
|
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 {
|
} else {
|
||||||
previewReader.readAsDataURL(selectedFile);
|
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
|
// set the name input value to the image name if none is set yet
|
||||||
if (nameInput.value === "") {
|
if (nameInput.value === "") {
|
||||||
nameInput.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
|
nameInput.value = selectedFile.name.substring(0, selectedFile.name.indexOf('.'));
|
||||||
|
|
|
@ -10,4 +10,4 @@
|
||||||
<script src="/siofu/client.js"></script>
|
<script src="/siofu/client.js"></script>
|
||||||
|
|
||||||
<script src="/assets/js/publishFunctions.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="/socket.io/socket.io.js"></script>
|
||||||
<script src="/siofu/client.js"></script>
|
<script src="/siofu/client.js"></script>
|
||||||
|
|
||||||
<script src="/assets/js/memeDraw.js"></script>
|
<script src="/assets/js/memeFodder-draw.js"></script>
|
||||||
<script src="/assets/js/memePublish.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"/>
|
<input type="file" id="siofu_input" name="file" accept="video/*,image/*" onchange="previewAndStageFile(event.target.files[0])" enctype="multipart/form-data"/>
|
||||||
</div>
|
</div>
|
||||||
<div id="asset-preview-holder">
|
<div id="asset-preview-holder">
|
||||||
<img id="asset-preview" src="" alt="asset preview"/>
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="col-right">
|
<div class="col-right">
|
||||||
|
|
Loading…
Reference in a new issue