From 375694875a2b98fdd79b35059aaf1aec07c6632a Mon Sep 17 00:00:00 2001 From: ElementalAlchemist Date: Sat, 9 Nov 2024 14:42:09 -0600 Subject: [PATCH] Enable viewing and editing thumbnail templates --- thrimbletrimmer/edit.html | 5 + thrimbletrimmer/src/common/googleAuth.tsx | 46 ++++ thrimbletrimmer/src/edit.tsx | 2 +- thrimbletrimmer/src/globalStyle.scss | 3 + thrimbletrimmer/src/index.tsx | 2 +- thrimbletrimmer/src/thumbnails.tsx | 2 +- .../thumbnails/ThumbnailManager.module.scss | 33 +++ .../src/thumbnails/ThumbnailManager.tsx | 259 +++++++++++++++++- thrimbletrimmer/src/utils.tsx | 2 +- thrimbletrimmer/thumbnails.html | 5 + 10 files changed, 353 insertions(+), 6 deletions(-) create mode 100644 thrimbletrimmer/src/common/googleAuth.tsx create mode 100644 thrimbletrimmer/src/globalStyle.scss create mode 100644 thrimbletrimmer/src/thumbnails/ThumbnailManager.module.scss diff --git a/thrimbletrimmer/edit.html b/thrimbletrimmer/edit.html index b5621e7..6a81c3c 100644 --- a/thrimbletrimmer/edit.html +++ b/thrimbletrimmer/edit.html @@ -3,6 +3,11 @@ Thrimbletrimmer - Editor + +
diff --git a/thrimbletrimmer/src/common/googleAuth.tsx b/thrimbletrimmer/src/common/googleAuth.tsx new file mode 100644 index 0000000..a5d4e02 --- /dev/null +++ b/thrimbletrimmer/src/common/googleAuth.tsx @@ -0,0 +1,46 @@ +import { Component } from "solid-js"; + +export let googleUser: any = null; +declare var gapi: any; // This is a global we use from the Google Sign In script + +function googleOnSignIn(googleUserData) { + googleUser = googleUserData; + + const signInElem = document.getElementById("google-auth-sign-in"); + if (signInElem) { + signInElem.classList.remove("hidden"); + } + const signOutElem = document.getElementById("google-auth-sign-out"); + if (signOutElem) { + signOutElem.classList.add("hidden"); + } +} + +async function googleSignOut() { + if (googleUser) { + googleUser = null; + await gapi.auth2.getAuthInstance().signOut(); + + const signInElem = document.getElementById("google-auth-sign-in"); + if (signInElem) { + signInElem.classList.add("hidden"); + } + const signOutElem = document.getElementById("google-auth-sign-out"); + if (signOutElem) { + signOutElem.classList.remove("hidden"); + } + } +} + +// The googleOnSignIn amd googleSignOut functions need to be available to the global scope for Google code to invoke it +(window as any).googleOnSignIn = googleOnSignIn; +(window as any).googleSignOut = googleSignOut; + +export const GoogleSignIn: Component = () => { + return ( +
+
+ +
+ ); +}; \ No newline at end of file diff --git a/thrimbletrimmer/src/edit.tsx b/thrimbletrimmer/src/edit.tsx index b497157..e29a544 100644 --- a/thrimbletrimmer/src/edit.tsx +++ b/thrimbletrimmer/src/edit.tsx @@ -1,5 +1,5 @@ +import "./globalStyle.scss"; import { render } from "solid-js/web"; - import Editor from "./editor/Editor"; const root = document.getElementById("root"); diff --git a/thrimbletrimmer/src/globalStyle.scss b/thrimbletrimmer/src/globalStyle.scss new file mode 100644 index 0000000..e7fc76e --- /dev/null +++ b/thrimbletrimmer/src/globalStyle.scss @@ -0,0 +1,3 @@ +.hidden { + display: none; +} \ No newline at end of file diff --git a/thrimbletrimmer/src/index.tsx b/thrimbletrimmer/src/index.tsx index 79071a1..f77959c 100644 --- a/thrimbletrimmer/src/index.tsx +++ b/thrimbletrimmer/src/index.tsx @@ -1,5 +1,5 @@ +import "./globalStyle.scss"; import { render } from "solid-js/web"; - import Restreamer from "./restreamer/Restreamer"; const root = document.getElementById("root"); diff --git a/thrimbletrimmer/src/thumbnails.tsx b/thrimbletrimmer/src/thumbnails.tsx index e8e7570..0ad2cec 100644 --- a/thrimbletrimmer/src/thumbnails.tsx +++ b/thrimbletrimmer/src/thumbnails.tsx @@ -1,5 +1,5 @@ +import "./globalStyle.scss"; import { render } from "solid-js/web"; - import ThumbnailManager from "./thumbnails/ThumbnailManager"; const root = document.getElementById("root"); diff --git a/thrimbletrimmer/src/thumbnails/ThumbnailManager.module.scss b/thrimbletrimmer/src/thumbnails/ThumbnailManager.module.scss new file mode 100644 index 0000000..2391be1 --- /dev/null +++ b/thrimbletrimmer/src/thumbnails/ThumbnailManager.module.scss @@ -0,0 +1,33 @@ +.templatesList { + display: grid; + grid-template-columns: max-content max-content max-content max-content max-content max-content max-content; + gap: 0px; + border-left: 1px solid #000; +} + +.templatesListHeader > div { + border-top: 1px solid #000; + font-weight: 700; +} + +.templatesListRow { + display: contents; +} + +.templatesListRow > div { + border-right: 1px solid #000; + border-bottom: 1px solid #000; + padding: 1px; +} + +.templateCoord { + width: 50px; +} + +.templateImagePreview { + max-width: 480px; +} + +.templateUpdateErrors { + color: #c00; +} \ No newline at end of file diff --git a/thrimbletrimmer/src/thumbnails/ThumbnailManager.tsx b/thrimbletrimmer/src/thumbnails/ThumbnailManager.tsx index 7679ffb..b2d779b 100644 --- a/thrimbletrimmer/src/thumbnails/ThumbnailManager.tsx +++ b/thrimbletrimmer/src/thumbnails/ThumbnailManager.tsx @@ -1,7 +1,262 @@ -import { Component } from "solid-js"; +import { Accessor, Component, createSignal, For, Index, onMount, Show } from "solid-js"; +import { GoogleSignIn, googleUser } from "../common/googleAuth"; +import styles from "./ThumbnailManager.module.scss"; + +class Coordinate { + x: number; + y: number; +} + +class Template { + name: string; + description: string; + attribution: string; + cropStart: Coordinate; + cropEnd: Coordinate; + locationStart: Coordinate; + locationEnd: Coordinate; +} const ThumbnailManager: Component = () => { - return <>; + const [templates, setTemplates] = createSignal([]); + + onMount(async () => { + const templateDataResponse = await fetch("/thrimshim/templates"); + if (!templateDataResponse.ok) { + return; + } + const templateData = await templateDataResponse.json(); + const templateList: Template[] = []; + for (const template of templateData) { + const cropStart = { x: template.crop[0], y: template.crop[1] }; + const cropEnd = { x: template.crop[2], y: template.crop[3] }; + const locationStart = { x: template.location[0], y: template.location[1] }; + const locationEnd = { x: template.location[2], y: template.location[3] }; + + templateList.push({ + name: template.name, + description: template.description, + attribution: template.attribution, + cropStart: cropStart, + cropEnd: cropEnd, + locationStart: locationStart, + locationEnd: locationEnd + }); + } + setTemplates(templateList); + }); + + return ( + <> +
+
+
Name
+
Description
+
Attribution
+
Crop Coordiates
+
Location Coordinates
+
Preview
+
+
+ + {(template: Accessor