From 46351e53d33324c7b1a8da6a8744b32ae4364449 Mon Sep 17 00:00:00 2001 From: Brandon Thomas Date: Sun, 31 Mar 2024 15:52:09 -0400 Subject: [PATCH] Brandon more styles (#118) --- .../src/app/inspector-tabs/style-tab.ts | 76 ++++++++++++++++++- .../src/app/style-select.element.scss | 53 +++++++++++++ .../src/app/style-select.element.ts | 66 ++++++++++++++++ .../src/app/temp-video-preview.element.ts | 8 +- 4 files changed, 196 insertions(+), 7 deletions(-) create mode 100644 studio-frontend/src/app/style-select.element.scss create mode 100644 studio-frontend/src/app/style-select.element.ts diff --git a/studio-frontend/src/app/inspector-tabs/style-tab.ts b/studio-frontend/src/app/inspector-tabs/style-tab.ts index 1311167..a8056f1 100644 --- a/studio-frontend/src/app/inspector-tabs/style-tab.ts +++ b/studio-frontend/src/app/inspector-tabs/style-tab.ts @@ -10,6 +10,18 @@ import styles from "./style-tab.scss?inline"; export type VstStyle = "anime_2d_flat" | "cartoon_3d" + | "anime_2d" + | "anime_ghibli" + | "anime_retro_neon" + | "anime_standard" + | "comic_book" + | "ink_punk" + | "pixel_art" + | "ink_splash" + | "jojo_style" + | "pop_art" + | "realistic_1" + | "realistic_2" | "ink_bw_style" | "paper_origami" ; @@ -23,24 +35,84 @@ export interface StyleOption { export const STYLE_OPTIONS: readonly StyleOption[] = [ { label: "2D Anime", + imageUrl: "", + value: "anime_2d", + }, + { + label: "2D Anime (Flat)", imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-2d-anime.webp", value: "anime_2d_flat", }, + { + label: "Anime Ghibli", + imageUrl: "", + value: "anime_ghibli", + }, + { + label: "Anime Retro Neon", + imageUrl: "", + value: "anime_retro_neon", + }, + { + label: "Anime Standard", + imageUrl: "", + value: "anime_standard", + }, { label: "3D Cartoon", imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-3d-cartoon.webp", value: "cartoon_3d", }, + { + label: "Comic Book", + imageUrl: "", + value: "comic_book", + }, + { + label: "Ink Punk", + imageUrl: "", + value: "ink_punk", + }, + { + label: "Ink Splash", + imageUrl: "", + value: "ink_splash", + }, { label: "Ink B&W", imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-ink-bw.webp", value: "ink_bw_style", }, + { + label: "Jojo Style", + imageUrl: "", + value: "jojo_style", + }, { label: "Origami", imageUrl: "https://fakeyou.com/images/landing/onboarding/styles/style-origami.webp", value: "paper_origami", }, + { + label: "Pixel Art", + imageUrl: "", + value: "pixel_art", + }, + { + label: "Pop Art", + imageUrl: "", + value: "pop_art", + }, + { + label: "Realistic 1", + imageUrl: "", + value: "realistic_1", + }, + { + label: "Realistic 2", + imageUrl: "", + value: "realistic_2", + }, ]; @customElement("sts-style-tab") @@ -60,7 +132,6 @@ export class StyleTab extends LitElement { oAThing(): void { console.log("🍕")}; compositorEnqueue = (sceneToken: string) => () => { - console.log("🏎️",this.sceneToken,sceneToken); EnqueueEngineCompositing("",{ uuid_idempotency_token: uuid(), media_file_token: sceneToken, @@ -69,8 +140,6 @@ export class StyleTab extends LitElement { skybox: "meadow_4k", }).then((res: any) => { if (res && res.success) { - console.log("💎",res.inference_job_token); - window.parent.postMessage( `studio-scene-composited:compositeJobToken:${ res.inference_job_token }`, "*" @@ -81,7 +150,6 @@ export class StyleTab extends LitElement { } thingy = ({ target }: any ) => { - console.log("🏎️", this.sceneToken); } protected override render = (): TemplateResult => html` diff --git a/studio-frontend/src/app/style-select.element.scss b/studio-frontend/src/app/style-select.element.scss new file mode 100644 index 0000000..ecc942b --- /dev/null +++ b/studio-frontend/src/app/style-select.element.scss @@ -0,0 +1,53 @@ +@use "sass:math"; + +:host { + // background: red; + display: flex; + gap: 0.6rem; + box-sizing: border-box; +} + +*, *::before, *::after { + box-sizing: border-box; +} + +.bubble { + position: relative; + flex: 0 0 auto; + display: flex; + align-items: flex-end; + width: 80px; + height: 80px; + padding: 0.5rem; + border-radius: 0.5rem; + background: { + size: cover; + position: center center; + } + + outline: #FFF2 solid 2px; + color: rgba(#fff, 0.75); + transition: { + property: background-color, outline-color; + duration: 200ms; + timing-function: ease; + } + white-space: nowrap; + + cursor: pointer; + + .gradient { + position: absolute; + inset: 0; + background: linear-gradient(to top, #000B, #0000); + border-radius: 0.5rem; + } + + .label { + position: relative; + font: { + size: math.div(12, 16) * 1rem; + weight: 500; + } + } +} diff --git a/studio-frontend/src/app/style-select.element.ts b/studio-frontend/src/app/style-select.element.ts new file mode 100644 index 0000000..14f0252 --- /dev/null +++ b/studio-frontend/src/app/style-select.element.ts @@ -0,0 +1,66 @@ +import { FormFieldBaseElement } from "@storyteller/studio-ui/forms/form-field-base"; +import { PropertyValues, html, unsafeCSS } from "lit"; +import { customElement, property } from "lit/decorators.js"; +import { classMap } from "lit/directives/class-map.js"; +import { styleMap } from "lit/directives/style-map.js"; + +import { type StyleOption, type VstStyle } from "./inspector-tabs/style-tab"; + +import styles from "./style-select.element.scss?inline"; + +@customElement("sts-style-select") +export class StyleSelect extends FormFieldBaseElement { + static override styles = unsafeCSS(styles); + + @property({ reflect: true }) + override role = "listbox" + + @property({ attribute: false }) + options: readonly StyleOption[] = []; + + @property() value?: VstStyle; + + protected override update(changes: PropertyValues): void { + if (changes.has("value")) + this.internals.setFormValue(this.value ?? ""); + + super.update(changes); + } + + protected override render = () => html` +
+ + +
+ ` +} diff --git a/studio-frontend/src/app/temp-video-preview.element.ts b/studio-frontend/src/app/temp-video-preview.element.ts index 72e8cf0..e914d7d 100644 --- a/studio-frontend/src/app/temp-video-preview.element.ts +++ b/studio-frontend/src/app/temp-video-preview.element.ts @@ -10,7 +10,7 @@ import { bind, on } from "@storyteller/framework"; import { VideoStylePreview } from "./api/VideoStylePreview"; -import "./bubble-select.element"; +import "./style-select.element"; import styles from "./temp-video-preview.element.scss?inline"; import { STYLE_OPTIONS, type VstStyle } from "./inspector-tabs/style-tab"; @@ -203,11 +203,13 @@ export class TempVideoPreview extends LitElement { > Select Base Style - + > +