Merge pull request #434 from mayeaux/adding-sprite-images

Adding sprite images

Author: mayeaux

controllers/backend/uploading.js

@@ -29,6 +29,7 @@ const sendMessageToDiscord = require('../../lib/moderation/discordWebhooks');
 const { saveAndServeFilesDirectory } = require('../../lib/helpers/settings');
 const getMediaType = require('../../lib/uploading/media');
 const { b2, bucket, hostUrl } = require('../../lib/uploading/backblaze');
+const createSpriteImageAndVtt = require('../../lib/uploading/createSpriteImages');
 
 const ffmpegHelper = require('../../lib/uploading/ffmpeg');
 const {
@@ -424,6 +425,7 @@ exports.postFileUpload = async(req, res) => {
 
           let bitrate, codecName, codecProfile;
 
+          // if not an image, requires ffprobe data collection
           if(upload.fileType !== 'image'){
 
             // load the ffprobe data in response
@@ -499,12 +501,16 @@ exports.postFileUpload = async(req, res) => {
 
           console.log('done moving file');
 
+
+          /** BASIC VIDEO PROCESSING COMPLETED, CHECKING IF NEEDS CONVERSION **/
+
           const specificMatches = ( codecName == 'hevc' || codecProfile == 'High 4:4:4 Predictive' );
 
           if(specificMatches || bitrate > maxBitrate){
             upload.fileType = 'convert';
           }
 
+          // TODO: a bit ugly, wish we could pull out 'only video' stuff and then do convert in its own conditional
           /** TELL THE USER WE ARE CONVERTING / COMPRESSING THEIR VIDEO **/
           if(upload.fileType == 'convert' || bitrate > maxBitrate || upload.fileType == 'video'){
 
@@ -516,6 +522,7 @@ exports.postFileUpload = async(req, res) => {
               // set upload progress as 1 so it has something to show on the frontend
               redisClient.setAsync(`${uniqueTag}uploadProgress`, 'Your upload is beginning processing...');
 
+              // video is marked as processing, end the request and send user to upload page
               if(!responseSent){
                 responseSent = true;
                 aboutToProcess(res, channelUrl, uniqueTag);
@@ -532,13 +539,14 @@ exports.postFileUpload = async(req, res) => {
 
             // TODO: savePath and fileInDirectory are the same thing, need to clean this code up
 
+            // if we need to convert, move it to this 'old' location so we can write to the new location
             if(fileExtension == '.mp4' && bitrate > maxBitrate || specificMatches){
               await fs.move(savePath, `${saveAndServeFilesDirectory}/${channelUrl}/${uniqueTag}-old.mp4`);
 
               fileInDirectory = `${saveAndServeFilesDirectory}/${channelUrl}/${uniqueTag}-old.mp4`;
             }
 
-            // if the file type is convert or it's over max bitrate
+            // if the file type is convert or it's over max bitrate, convert it with ffmpeg
             if(upload.fileType == 'convert' || (bitrate > maxBitrate && fileExtension == '.mp4')){
 
               console.log(fileInDirectory);
@@ -553,7 +561,8 @@ exports.postFileUpload = async(req, res) => {
 
               uploadLogger.info('Finished converting file', logObject);
 
-              // assuming an mp4 is created at this point so we delete the old uncoverted video
+              // assuming an mp4 is created at this point so we delete the old unconverted video
+              // note, $fileInDirectory is changed
               await fs.remove(`${fileInDirectory}`);
 
               uploadLogger.info('Deleted unconverted file', logObject);
@@ -625,6 +634,19 @@ exports.postFileUpload = async(req, res) => {
             responseSent = true;
             aboutToProcess(res, channelUrl, uniqueTag);
           }
+
+          // once everything is done, generate thumbnail previews
+          if(upload.fileType === 'video'){
+            // will automatically stick it at /uploads/$channelUrl/$uniqueTag_sprite.png and /$uniqueTag_sprite.vtt
+            (async function(){
+              if(user.plan === 'plus') {
+                await createSpriteImageAndVtt(channelUrl, uniqueTag, fileInDirectory)
+
+                upload.hasPreviewSpriteThumbnail = true;
+                await upload.save();
+              }
+            })()
+          }
         });
 
         // });

lib/uploading/createSpriteImages.js

@@ -0,0 +1,50 @@
+const createSpriteWithVTT = require('generate-video-sprites-node');
+/** input and output paths **/
+
+/**  variables to setup the output of the sprite/vtt **/
+// how often should a snapshot be taken
+const intervalInSecondsAsInteger = 1;
+
+// size of the hover image
+const widthInPixels = 300;
+const heightInPixels = 169;
+
+// how many columns to use, seems arbitrary so I'll use 5
+const columns = 5;
+
+async function createWebVttAndSpriteImage(channelUrl, uploadUniqueTag, uploadFilePath){
+
+  /** input and output paths **/
+  // used in the paths, could use different names if you want
+  const filename = uploadUniqueTag
+
+  // the file to create sprite and vtt from
+  const inputFile = uploadFilePath;
+
+  const spriteFileName = `${uploadUniqueTag}_sprite.png`;
+  const vttFileName = `${uploadUniqueTag}_sprite.vtt`;
+
+  const prependPath = `/uploads/${channelUrl}`
+
+  // where to output the files
+  const spriteOutputFilePath = `./uploads/${channelUrl}/${spriteFileName}`;
+  const webVTTOutputFilePath = `./uploads/${channelUrl}/${vttFileName}`;
+
+  const pathToGenerator = './node_modules/generate-video-sprites-node/generator'
+
+  await createSpriteWithVTT({
+    pathToGenerator,
+    inputFile,
+    intervalInSecondsAsInteger,
+    widthInPixels, heightInPixels, columns,
+    spriteOutputFilePath,
+    webVTTOutputFilePath,
+    prependPath,
+    filename,
+    spriteFileName
+  })
+
+  console.log('DONE CREATING SPRITE IMAGE AND WEBVTT!');
+}
+
+module.exports = createWebVttAndSpriteImage

package-lock.json

@@ -66,6 +66,7 @@
     "forever": "^2.0.0",
     "formidable": "^1.2.1",
     "fs-extra": "^4.0.3",
+    "generate-video-sprites-node": "^1.0.3",
     "get-audio-duration": "^2.0.0",
     "get-video-duration": "^1.0.3",
     "heroku-ssl-redirect": "0.0.4",

package.json

@@ -113,9 +113,9 @@ script.
     seekTime,
   };
 
-  const hasPreviewThumbnail = #{upload.hasPreviewSpriteThumbnail}
+  const hasPreviewThumbnail = '#{upload.hasPreviewSpriteThumbnail}'
 
-  if(hasPreviewThumbnail){
+  if(hasPreviewThumbnail === 'true'){
     const previewThumbnails = {
       enabled: true,
       src: [`/uploads/#{upload.uploader.channelUrl}/#{upload.uniqueTag}_sprite.vtt`],

views/mediaPlayerPartials/plyrAndAutoplayFunctionalityJs.pug

@@ -5,7 +5,7 @@ script.
   setTimeout(function(){
     // TODO: thing here
     $zopim(function () {
-      $zopim.livechat.window.hide();
+      // $zopim.livechat.window.hide();
     });
   }, 2000)
 //End of  Zendesk Widget script