yt-grabber 1.8.4 → 1.8.5

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "yt-grabber",
-  "version": "1.8.4",
+  "version": "1.8.5",
   "description": "Youtube Grabber - robust desktop application designed to retrieve multimedia from YouTube and YouTube Music services",
   "keywords": [
     "youtube",

package/src/common/Media.ts

@@ -24,6 +24,8 @@ export type Format = {
     extension?: AudioType | VideoType;
     videoQuality?: string;
     audioQuality?: number;
+    gifTopText?: string;
+    gifBottomText?: string;
 }
 
 export enum FormatScope {

package/src/common/YtdplUtils.ts

@@ -334,15 +334,24 @@ export const generateColorPalette = (directory: string, filename: string, format
     });
 };
 
-export const createGifUsingPalette = (directory: string, filename: string, format: Format, extension: string, callback: (error?: Error) => void) => {
+export const createGifUsingPalette = (directory: string, filename: string, format: Format, callback: (error?: Error) => void) => {
     const errors: string[] = [];
     const selected = format.videoQuality;
-    const [width] = _map(selected.match(/\d+/g), Number);
+    const [width, height] = _map(selected.match(/\d+/g), Number);
+    const gifTopTextLength = format.gifTopText ? format.gifTopText.length : 0;
+    const gifBottomTextLength = format.gifBottomText ? format.gifBottomText.length : 0;
+    const scalingFactor = 1.7;
+    const paddingX = width * 0.02;
+    const maxFontSize = height * 0.07;
+    const fontSize = Math.min(Math.round(((width - paddingX * 2) / Math.max(gifTopTextLength, gifBottomTextLength, 1)) * scalingFactor), maxFontSize);
+    const borderSize = Math.max(Math.round(fontSize * 0.04));
+    const gifTopText = format.gifTopText ? `,drawtext=fontfile=/path/to/Arial.ttf:text='${format.gifTopText}':x=(w-text_w)/2:y=h*0.05:fontcolor=white:fontsize=${fontSize}:bordercolor=black:borderw=${borderSize}` : "";
+    const gifBottomText = format.gifBottomText ? `,drawtext=fontfile=/path/to/Arial.ttf:text='${format.gifBottomText}':x=(w-text_w)/2:y=h*0.95-th:fontcolor=white:fontsize=${fontSize}:bordercolor=black:borderw=${borderSize}` : "";
     const cmdArgs = [
         "-y",
         "-i", `${directory}/${filename}.mkv`,
         "-i", `${directory}/${filename}-palette.png`,
-        "-filter_complex", `fps=15,scale=${width}:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=floyd_steinberg`,
+        "-filter_complex", `fps=15,scale=${width}:-1:flags=lanczos[x];[x][1:v]paletteuse=dither=floyd_steinberg${gifTopText}${gifBottomText}`,
         `${directory}/${filename}.gif`,
     ];
 

package/src/components/youtube/formatSelector/FormatSelector.styl

@@ -1,3 +1,38 @@
 .format-selector {
+    
+    .accordion {
+        background: transparent;
+        background-image: none;
 
+        .accordion-summary {
+            border-radius: 8px;
+            background-color: var(--theme-palette-background-paper);
+            background-color: var(--theme-palette-primary-dark);
+            background-image: var(--Paper-overlay);
+            border: 1px solid var(--theme-palette-divider);
+        }
+
+        &:global(.Mui-expanded) {
+            .accordion-summary {
+                border-bottom-left-radius: 0;
+                border-bottom-right-radius: 0;
+            }
+        }
+
+        .accordion-details {
+            border-radius: 8px;
+            border-top-left-radius: 0;
+            border-top-right-radius: 0;
+            border: 1px solid var(--theme-palette-divider);
+            border-top: none;
+        }
+    }
+
+    .text-input-group {
+        gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing);
+
+        .control-group {
+            gap: var(--Grid-rowSpacing) var(--Grid-columnSpacing);
+        }
+    }
 }

package/src/components/youtube/formatSelector/FormatSelector.tsx

@@ -10,10 +10,13 @@ import _last from "lodash/last";
 import _map from "lodash/map";
 import _uniq from "lodash/uniq";
 import _values from "lodash/values";
-import React, {useEffect, useState} from "react";
+import React, {ChangeEvent, useEffect, useState} from "react";
 import {useTranslation} from "react-i18next";
 
-import {FormControl, Grid, InputLabel, MenuItem, Select, SelectChangeEvent} from "@mui/material";
+import {
+    Accordion, AccordionDetails, AccordionSummary, FormControl, Grid, InputLabel, MenuItem, Select,
+    SelectChangeEvent, Stack, TextField, Typography
+} from "@mui/material";
 
 import {AudioType, Format, FormatScope, MediaFormat, VideoType} from "../../../common/Media";
 import {ApplicationOptions} from "../../../common/Store";
@@ -44,7 +47,9 @@ export const FormatSelector: React.FC<FormatSelectorProps> = (props) => {
     const [format, setFormat] = useState(resolveFormat(options.formatScope, formats, activeTab)); 
     const [extensions, setExtensions] = useState<Array<AudioType | VideoType>>(format.type === MediaFormat.Audio ? audioExtensions : videoExtensions);
     const [resolutions, setResolutions] = useState<string[]>();
-    
+    const [gifTopText, setGifTopText] = useState("");
+    const [gifBottomText, setGifBottomText] = useState("");
+
     const [selectedMediaType, setSelectedMediaType] = useState<MediaFormat>(format.type ?? MediaFormat.Audio);
     const [selectedAudioExtension, setSelectedAudioExtension] = useState<AudioType>(format.type === MediaFormat.Audio ? format.extension as AudioType :_first(audioExtensions));
     const [selectedVideoExtension, setSelectedVideoExtension] = useState<VideoType>(format.type === MediaFormat.Video ? format.extension as VideoType :_first(videoExtensions));
@@ -83,8 +88,10 @@ export const FormatSelector: React.FC<FormatSelectorProps> = (props) => {
             extension: selectedFormat,
             videoQuality: selectedResolution,
             audioQuality: selectedQuality,
+            gifTopText,
+            gifBottomText
         });
-    }, [selectedMediaType, selectedFormat, selectedVideoExtension, selectedResolution, selectedQuality]);
+    }, [selectedMediaType, selectedFormat, selectedVideoExtension, selectedResolution, selectedQuality, gifTopText, gifBottomText]);
 
     useEffect(() => {        
         setFormat(resolveFormat(options.formatScope, formats, activeTab));
@@ -149,6 +156,14 @@ export const FormatSelector: React.FC<FormatSelectorProps> = (props) => {
         setSelectedQuality(value);
     };
 
+    const onGifTopTextChanged = (event: ChangeEvent<HTMLInputElement>) => {
+        setGifTopText(event.target.value);
+    };
+
+    const onGifBottomTextChanged = (event: ChangeEvent<HTMLInputElement>) => {
+        setGifBottomText(event.target.value);
+    };
+
     return (
         <Grid className={Styles.formatSelector} container spacing={2} padding={2}>
             <Grid size="grow">
@@ -214,6 +229,31 @@ export const FormatSelector: React.FC<FormatSelectorProps> = (props) => {
                     />
                 </Grid>
             }
+            {selectedMediaType === MediaFormat.Video && selectedFormat === VideoType.Gif &&
+                <Grid size={12}>
+                    <Accordion
+                        elevation={0}
+                        className={Styles.accordion}
+                        data-help="gifTextOptions"
+                        disableGutters
+                        expanded
+                    >
+                        <AccordionSummary className={Styles.accordionSummary}>
+                            <Typography variant="body1">{t("gifTextOptions")}</Typography>
+                        </AccordionSummary>
+                        <AccordionDetails className={Styles.accordionDetails}>
+                            <Stack direction="column" spacing={1} paddingX={0} paddingY={2} paddingBottom={0}>  
+                                <FormControl className={Styles.textInputGroup} data-help="gifTopText">
+                                    <TextField label={t("gifTopText")} variant="outlined" value={gifTopText} onChange={onGifTopTextChanged} />
+                                </FormControl>
+                                <FormControl className={Styles.textInputGroup} data-help="gifBottomText">
+                                    <TextField label={t("gifBottomText")} variant="outlined" value={gifBottomText} onChange={onGifBottomTextChanged} />
+                                </FormControl>
+                            </Stack>
+                        </AccordionDetails>
+                    </Accordion>
+                </Grid>
+            }
         </Grid>
     );
 };

package/src/resources/locales/de-DE/help.json

@@ -175,5 +175,11 @@
     "downloadReleaseDateUntilHeader": "Bis Jahr",
     "downloadReleaseDateUntilContent": "Elemente mit einem Veröffentlichungsdatum nach diesem Jahr werden ausgelassen.",
     "downloadAlbumsHeader": "Alben",
-    "downloadAlbumsContent": "Schließen Sie beim Herunterladen der Alben des Künstlers vollständige Albumveröffentlichungen ein."
+    "downloadAlbumsContent": "Schließen Sie beim Herunterladen der Alben des Künstlers vollständige Albumveröffentlichungen ein.",
+    "gifTextOptionsHeader": "GIF Text Optionen",
+    "gifTextOptionsContent": "Optionen zum Hinzufügen von Text oben und/oder unten zu generierten GIF-Dateien.",
+    "gifTopTextHeader": "Text oben",
+    "gifTopTextContent": "Text, der oben in der generierten GIF-Datei hinzugefügt werden soll",
+    "gifBottomTextHeader": "Text unten",
+    "gifBottomTextContent": "Text, der unten in der generierten GIF-Datei hinzugefügt werden soll"
 }

package/src/resources/locales/de-DE/translation.json

@@ -49,6 +49,9 @@
     "foundDeletedOrPrivateMedia": "Einige gelöschte oder private Medien wurden gefunden. Sie wurden übersprungen und werden in den Ergebnissen nicht angezeigt.",
     "from": "von",
     "fromYear": "Von (Jahr)",
+    "gifBottomText": "Text unten",
+    "gifTextOptions": "Textoptionen für GIFs",
+    "gifTopText": "Text oben",
     "invalidTemplateKeys": "Ungültige Vorlagenschlüssel: {{invalidKeys}}",
     "langName": "Deutsch",
     "loadFromFile": "Aus Datei laden",

package/src/resources/locales/en-GB/help.json

@@ -175,5 +175,11 @@
     "downloadReleaseDateUntilHeader": "Until year",
     "downloadReleaseDateUntilContent": "Items with release date after this year will be omitted.",
     "downloadAlbumsHeader": "Albums",
-    "downloadAlbumsContent": "Include full album releases when downloading artist's albums."
+    "downloadAlbumsContent": "Include full album releases when downloading artist's albums.",
+    "gifTextOptionsHeader": "GIF Text Options",
+    "gifTextOptionsContent": "Options to add text to top and/or bottom of generated GIF files.",
+    "gifTopTextHeader": "Top Text",
+    "gifTopTextContent": "Text to be added at the top of generated GIF file",
+    "gifBottomTextHeader": "Bottom Text",
+    "gifBottomTextContent": "Text to be added at the bottom of generated GIF file"
 }

package/src/resources/locales/en-GB/translation.json

@@ -49,6 +49,9 @@
     "foundDeletedOrPrivateMedia": "Encountered some deleted or private media. They were skipped and won't be show in results.",
     "from": "from",
     "fromYear": "From (year)",
+    "gifBottomText": "Bottom text",
+    "gifTextOptions": "Text options for GIFs",
+    "gifTopText": "Top text",
     "invalidTemplateKeys": "Invalid template keys: {{invalidKeys}}",
     "langName": "English",
     "loadFromFile": "Load from file",

package/src/resources/locales/pl-PL/help.json

@@ -175,5 +175,11 @@
     "downloadReleaseDateUntilHeader": "Do",
     "downloadReleaseDateUntilContent": "Elementy z datą wydania późniejszą niż ten rok zostaną pominięte.",
     "downloadAlbumsHeader": "Albumy",
-    "downloadAlbumsContent": "Uwzględnij pełne wydania albumów podczas pobierania dyskografii artysty."
+    "downloadAlbumsContent": "Uwzględnij pełne wydania albumów podczas pobierania dyskografii artysty.",
+    "gifTextOptionsHeader": "Opcje tekstu GIF",
+    "gifTextOptionsContent": "Opcje dodawania tekstu na górze i/lub dole generowanych plików GIF.",
+    "gifTopTextHeader": "Tekst na górze",
+    "gifTopTextContent": "Tekst do dodania na górze generowanego pliku GIF",
+    "gifBottomTextHeader": "Tekst na dole",
+    "gifBottomTextContent": "Tekst do dodania na dole generowanego pliku GIF"
 }

package/src/resources/locales/pl-PL/translation.json

@@ -49,6 +49,9 @@
     "foundDeletedOrPrivateMedia": "Napotkano usunięte lub prywatne media. Zostały one pominięte i nie będą wyświetlane w wynikach.",
     "from": "start",
     "fromYear": "Od (rok)",
+    "gifBottomText": "Dolny tekst",
+    "gifTextOptions": "Opcje tekstu dla GIF-ów",
+    "gifTopText": "Górny tekst",
     "invalidTemplateKeys": "Nieprawidłowe wartości: {{invalidKeys}}",
     "langName": "Polski",
     "loadFromFile": "Wczytaj z pliku",

package/src/views/home/HomeView.tsx

@@ -692,7 +692,7 @@ export const HomeView: React.FC = () => {
                         if (error) {
                             setErrors((prev) => [...prev, {url: track.original_url, message: error.message}]);
                         }
-                        createGifUsingPalette(fileInfo.dir, fileInfo.name, format, format.extension, (error: Error) => {
+                        createGifUsingPalette(fileInfo.dir, fileInfo.name, format, (error: Error) => {
                             if (error) {
                                 setErrors((prev) => [...prev, {url: track.original_url, message: error.message}]);
                             }
@@ -735,7 +735,7 @@ export const HomeView: React.FC = () => {
                         if (error) {
                             setErrors((prev) => [...prev, {url: track.original_url, message: error.message}]);
                         }
-                        createGifUsingPalette(fileInfo.dir, fileInfo.name, format, format.extension, (error) => {
+                        createGifUsingPalette(fileInfo.dir, fileInfo.name, format, (error) => {
                             if (error) {
                                 setErrors((prev) => [...prev, {url: track.original_url, message: error.message}]);
                             }