Thumbnails (#3)

* Show default thumbnail

* Add color picker

* Customizable logo

* It kinda works

* Save multiple thumbnails

* Support for character icons

* Fix unknown characters

Author: willie-yao

assets/MSLogo.png

@@ -119,6 +119,7 @@
     "@mui/material": "^5.11.6",
     "@mui/x-date-pickers": "^5.0.17",
     "axios": "^1.2.4",
+    "buffer": "^6.0.3",
     "dotenv": "^16.0.3",
     "electron-debug": "^3.2.0",
     "electron-is-dev": "^2.0.0",
@@ -128,8 +129,11 @@
     "google-auth-library": "^8.7.0",
     "googleapis": "^110.0.0",
     "graphql": "^16.6.0",
+    "html2canvas": "^1.4.1",
     "moment": "^2.29.4",
+    "mui-color-input": "^1.0.4",
     "react": "^18.2.0",
+    "react-component-export-image": "^1.0.6",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.4.0",
     "react-spinners": "^0.13.8",

package-lock.json

@@ -73,7 +73,7 @@ ipcMain.handle('create-folder', async (event, arg) => {
 });
 
 ipcMain.handle('open-folder', async (event, arg) => {
-  shell.openPath(process.cwd() + path.sep + 'downloadedVODs' + path.sep + arg);
+  shell.openPath(process.cwd() + path.sep + 'downloadedVODs' + path.sep + arg.replace(":", "#"));
 });
 
 ipcMain.handle('retrieve-video-information', async (event, arg) => {
@@ -118,37 +118,68 @@ ipcMain.handle('open-google-login', async (event, arg) => {
   return myApiOauth.openAuthWindowAndGetTokens();
 });
 
+ipcMain.handle('create-thumbnail-folder', async(event, arg) => {
+  fs.mkdir('./downloadedVODs/' + arg.replace(":", "#") + "/thumbnails", { recursive: true }, (err: Error) => {
+    if (err) throw err;
+  })
+})
+
+ipcMain.handle('save-thumbnail', async (event, args) => {
+  console.log("Saving thumbnail: ", args)
+  // fs.mkdir('./downloadedVODs/' + args.folderName.replace(":", "#") + "/thumbnails", { recursive: true }, (err: Error) => {
+  //   if (err) throw err;
+  // })
+  fs.writeFile("./downloadedVODs/" + args.folderName.replace(":", "#") + "/thumbnails/" + args.fileName.replace(":", "#") + ".jpg", args.buf, function (err: any) {
+    if (err) {
+      console.log(err);
+    }
+  })
+})
+
 ipcMain.handle('upload-videos', async (event, args) => {
-  const fileSize = fs.statSync(args.path).size;
-  return youtube.videos.insert(
-    {
-      part: 'id,snippet,status',
-      notifySubscribers: false,
-      requestBody: {
-        snippet: {
-          title: args.videoName.replace(/\.[^/.]+$/, ''),
-          description: args.description,
-        },
-        status: {
-          privacyStatus: 'unlisted',
-        },
-      },
-      media: {
-        body: fs.createReadStream(args.path),
-      },
-      access_token: args.accessToken,
-    },
-    {
-      // Use the `onUploadProgress` event from Axios to track the
-      // number of bytes uploaded to this point.
-      onUploadProgress: (evt: any) => {
-        const progress = (evt.bytesRead / fileSize) * 100;
-        readline.clearLine(process.stdout, 0);
-        readline.cursorTo(process.stdout, 0, null);
-        process.stdout.write(`${Math.round(progress)}% complete`);
-      },
+  return fs.readdirSync(args.path).forEach((videoName: any) => {
+    const fileSize = fs.statSync(args.path + videoName).size;
+    if (path.extname(videoName).toLowerCase() === '.mp4') {
+      console.log('videoName', videoName);
+      return youtube.videos
+        .insert(
+          {
+            part: 'id,snippet,status',
+            notifySubscribers: true,
+            requestBody: {
+              snippet: {
+                title: videoName.replace(/\.[^/.]+$/, ''),
+                description: args.description,
+              },
+              status: {
+                privacyStatus: args.visibility,
+              },
+            },
+            media: {
+              body: fs.createReadStream(args.path + videoName),
+            },
+            access_token: args.accessToken,
+          },
+          {
+            // Use the `onUploadProgress` event from Axios to track the
+            // number of bytes uploaded to this point.
+            onUploadProgress: (evt: any) => {
+              const progress = (evt.bytesRead / fileSize) * 100;
+              readline.clearLine(process.stdout, 0);
+              readline.cursorTo(process.stdout, 0, null);
+              process.stdout.write(`${Math.round(progress)}% complete`);
+            },
+          }
+        )
+        .then((response: any) => {
+          console.log('response', response);
+        })
+        .catch((error: any) => {
+          console.log('error', error);
+          return error.errors[0].message;
+        });
     }
-  )
+  })
 });
 
 ipcMain.handle('get-api-key', async (event, arg) => {

package.json

@@ -47,6 +47,12 @@ const electronHandler = {
     openGoogleLogin(arg: string) {
       return ipcRenderer.invoke('open-google-login', arg)
     },
+    createThumbnailFolder(arg: string) {
+      return ipcRenderer.invoke('create-thumbnail-folder', arg)
+    },
+    saveThumbnail(args: object) {
+      return ipcRenderer.invoke('save-thumbnail', args)
+    },
     uploadVideos(args: object) {
       return ipcRenderer.invoke('upload-videos', args)
     },

src/main/main.ts

@@ -81,3 +81,13 @@ a:hover {
 .timepicker {
   width: 78vw;
 }
+
+.centered-flex {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.MuiColorInput-TextField{
+  width: 50%;
+}

src/main/preload.ts

@@ -4,6 +4,7 @@ import './App.css';
 import { Box, Typography, Container, Link, ThemeProvider } from '@mui/material';
 import VideoSearch from './components/VideoSearch';
 import YTUploadView from './pages/YTUploadView';
+import ThumbnailGenerator from './components/ThumbnailGenerator';
 import {
   ApolloClient,
   InMemoryCache,
@@ -105,6 +106,8 @@ export default function App() {
             <Route path="/SetsView" element={<SetsView />} />
             {/* <Route path="/" element={<YTUploadView />} /> */}
             <Route path="/YTUploadView" element={<YTUploadView />} />
+            {/* <Route path="/ThumbnailGenerator" element={<ThumbnailGenerator />} />
+            <Route path="/" element={<ThumbnailGenerator />} /> */}
           </Routes>
         </Router>
       </ThemeProvider>

src/renderer/App.css

@@ -0,0 +1,91 @@
+import React, {ReactInstance, ReactNode} from "react";
+import { Box, Grid, Typography } from "@mui/material";
+import DefaultIcon from '../../../assets/MsLogo.png';
+
+const ThumbnailText = (text: string, variant: any) => {
+  return (
+    <Typography variant={variant} sx={{ color: 'white', fontWeight: 'bold', textAlign: 'center'}} noWrap>
+      {text}
+    </Typography>
+  )
+}
+
+interface Props {
+  children?: ReactNode;
+  scale?: string;
+  bgColor?: string;
+  logo?: string;
+  player1?: string;
+  player2?: string;
+  character1?: string;
+  character2?: string;
+  bottomText?: string;
+  visible?: boolean;
+  title?: string;
+}
+export type Ref = ReactInstance;
+
+const characterFolder = './characters/';
+
+// Create Document Component
+const ThumbnailGenerator = React.forwardRef<Ref, Props>((props, ref) => {
+  // console.log("images", images)
+  let displayOption = props.visible ? 'block' : 'none';
+  return (
+    <Box id={props.title} ref={ref} sx={{ height: '720px', width: '1280px', backgroundColor: '#B9F3FC', scale: props.scale, transformOrigin: 'top left', display: displayOption }}>
+      <Grid container>
+        <Grid item xs={12}>
+          <Grid container sx={{ width: '100%', height: '110px', backgroundColor: 'black'}}>
+            <Grid item xs={5} className="centered-flex">
+              {ThumbnailText(props.player1!, "h3")}
+            </Grid>
+            <Grid item xs={2} className="centered-flex">
+              {ThumbnailText('VS', "h1")}
+            </Grid>
+            <Grid item xs={5} className="centered-flex">
+              {ThumbnailText(props.player2!, "h3")}
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container sx={{ width: '100%', height: '500px', backgroundColor: props.bgColor}}>
+            <Grid sx={{ position: 'relative', left: '-50px', bottom: '10px'}} item xs={5} className="centered-flex">
+              <img src={require(`${ characterFolder + props.character1 + '.png' }`)} />
+            </Grid>
+            <Grid item xs={2} className="centered-flex">
+              <img src={props.logo === '' ? DefaultIcon : props.logo} width="250px" height="250px" />
+            </Grid>
+            <Grid sx={{ position: 'relative', left: '50px', bottom: '10px'}} item xs={5} className="centered-flex">
+              <img src={require(`${ characterFolder + props.character2 + '.png' }`)} />
+            </Grid>
+          </Grid>
+        </Grid>
+        <Grid item xs={12}>
+          <Grid container sx={{ width: '100%', height: '110px', backgroundColor: 'black'}}>
+            {/* <Grid item xs={2} className="centered-flex">
+            </Grid> */}
+            <Grid item xs={12} className="centered-flex">
+              {ThumbnailText(props.bottomText!, "h2")}
+            </Grid>
+            {/* <Grid item xs={2} className="centered-flex"> */}
+            {/* </Grid> */}
+          </Grid>
+        </Grid>
+      </Grid>
+    </Box>
+  )
+});
+
+ThumbnailGenerator.defaultProps = {
+  scale: '1',
+  bgColor: '#B9F3FC',
+  logo: DefaultIcon,
+  player1: 'Player 1',
+  player2: 'Player 2',
+  character1: 'Random Character',
+  character2: 'Random Character',
+  bottomText: 'Grand Finals',
+  visible: true
+}
+
+export default ThumbnailGenerator

src/renderer/App.tsx

@@ -1,4 +1,4 @@
-import { useState, useEffect } from 'react';
+import { createRef, useState, useEffect, ReactInstance } from 'react';
 import { Button, Box, TextField } from '@mui/material';
 import { GET_SETS_AT_STATION } from 'renderer/common/StartggQueries';
 import { useLazyQuery } from '@apollo/client';
@@ -13,6 +13,11 @@ export interface VODMetadata {
   startTime: string;
   endTime: string;
   download: boolean;
+  player1: string;
+  player2: string;
+  character1: string;
+  character2: string;
+  tournamentName: string;
 }
 
 const RetrieveSets = (
@@ -61,6 +66,7 @@ const RetrieveSets = (
           let characterMap = window.electron.store.get('characterMap');
           const formattedSets = data.event.sets.nodes.map((set: any) => {
             let characterStrings = ['', ''];
+            let characters = ['Random Character', 'Random Character'];
             if (set.games != null) {
               let characterArrays: string[][] = [[], []];
               for (const game of set.games) {
@@ -84,6 +90,8 @@ const RetrieveSets = (
               }
               characterStrings[0] = ' (' + characterArrays[0].join(', ') + ')';
               characterStrings[1] = ' (' + characterArrays[1].join(', ') + ')';
+              characters[0] = characterArrays[0][0]
+              characters[1] = characterArrays[1][0]
             }
             let metadata: VODMetadata = {
               title:
@@ -103,6 +111,11 @@ const RetrieveSets = (
                 .toISOString()
                 .slice(11, 19),
               download: true,
+              player1: set.slots[0].entrant.name.split('|').pop().trim(),
+              player2: set.slots[1].entrant.name.split('|').pop().trim(),
+              character1: characters[0],
+              character2: characters[1],
+              tournamentName: data.event.tournament.name,
             };
             return metadata;
           });