removed video thumnail attempt

This commit is contained in:
bill bittner 2017-07-07 21:08:42 -07:00
parent c8a545cc34
commit 2a99cef1ce
8 changed files with 15 additions and 86 deletions

View file

@ -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;
} }

View file

@ -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('.'));

View file

@ -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>

View file

@ -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>

View file

@ -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">