diff --git a/packages/fakeyou.com/package.json b/packages/fakeyou.com/package.json index a0849337e4..deacd02d14 100644 --- a/packages/fakeyou.com/package.json +++ b/packages/fakeyou.com/package.json @@ -32,6 +32,7 @@ "@types/react-dom": "^16.9.8", "axios": "^0.21.0", "bulma": "^0.9.0", + "bootstrap": "5.1.3", "craco": "^0.0.3", "date-fns": "2.22.1", "framer-motion": "^6.5.1", diff --git a/packages/fakeyou.com/src/App.tsx b/packages/fakeyou.com/src/App.tsx index 4380c46c10..e9216c3325 100644 --- a/packages/fakeyou.com/src/App.tsx +++ b/packages/fakeyou.com/src/App.tsx @@ -1,4 +1,5 @@ import "./AppNew.scss"; +import "scss/custom-bootstrap.scss"; import React from "react"; import { ApiConfig } from "@storyteller/components"; @@ -184,12 +185,15 @@ function newVocodes() { return discord || twitter || alphaCookie; } -function initInferenceJobsByCategoryMap() : Map { - let inferenceJobsByCategory = new Map(); - inferenceJobsByCategory.set(FrontendInferenceJobType.FaceAnimation, []); - inferenceJobsByCategory.set(FrontendInferenceJobType.TextToSpeech, []); - inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceConversion, []); - return inferenceJobsByCategory; +function initInferenceJobsByCategoryMap(): Map< + FrontendInferenceJobType, + InferenceJob[] +> { + let inferenceJobsByCategory = new Map(); + inferenceJobsByCategory.set(FrontendInferenceJobType.FaceAnimation, []); + inferenceJobsByCategory.set(FrontendInferenceJobType.TextToSpeech, []); + inferenceJobsByCategory.set(FrontendInferenceJobType.VoiceConversion, []); + return inferenceJobsByCategory; } function isMacOs() { diff --git a/packages/fakeyou.com/src/index.tsx b/packages/fakeyou.com/src/index.tsx index 8741671386..94946a02b5 100644 --- a/packages/fakeyou.com/src/index.tsx +++ b/packages/fakeyou.com/src/index.tsx @@ -1,32 +1,40 @@ -import React from 'react'; -import ReactDOM from 'react-dom'; -import * as serviceWorker from './serviceWorker'; -import AppTranslated from './AppTranslated'; +import React from "react"; +import ReactDOM from "react-dom"; +import * as serviceWorker from "./serviceWorker"; +import AppTranslated from "./AppTranslated"; -const IS_IOS : boolean = /iPad|iPhone|iPod/.test(navigator.platform || ""); +const IS_IOS: boolean = /iPad|iPhone|iPod/.test(navigator.platform || ""); const enableSpectrograms = !IS_IOS; -const flashVocodesNotice = new URLSearchParams(window.location.search).has('vocodes'); +const flashVocodesNotice = new URLSearchParams(window.location.search).has( + "vocodes" +); -const designSystemClass = 'fakeyou-refresh'; +const designSystemClass = "fakeyou-refresh"; -document.getElementsByTagName('html')[0].classList.add(designSystemClass); +document.getElementsByTagName("html")[0].classList.add(designSystemClass); // We can't include Bootstrap CSS along with Bulma since some of the class names conflict. // TODO(echelon): Once ported, statically move CSS to "index.html". -const bootstrapCss = document.createElement("link"); -bootstrapCss.setAttribute("rel", "stylesheet"); -bootstrapCss.setAttribute("crossorigin", "anonymous"); -bootstrapCss.setAttribute("integrity", "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"); -bootstrapCss.setAttribute("href", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"); -document.getElementsByTagName("head")[0].appendChild(bootstrapCss); +// const bootstrapCss = document.createElement("link"); +// bootstrapCss.setAttribute("rel", "stylesheet"); +// bootstrapCss.setAttribute("crossorigin", "anonymous"); +// bootstrapCss.setAttribute("integrity", "sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"); +// bootstrapCss.setAttribute("href", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"); +// document.getElementsByTagName("head")[0].appendChild(bootstrapCss); const bootstrapJs = document.createElement("script"); bootstrapJs.setAttribute("rel", "stylesheet"); bootstrapJs.setAttribute("crossorigin", "anonymous"); -bootstrapJs.setAttribute("integrity", "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"); -bootstrapJs.setAttribute("src", "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"); +bootstrapJs.setAttribute( + "integrity", + "sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" +); +bootstrapJs.setAttribute( + "src", + "https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js" +); document.getElementsByTagName("body")[0].appendChild(bootstrapJs); // NB: Posthog turned off for most users (anonymous users) due to cost. @@ -37,11 +45,11 @@ document.getElementsByTagName("body")[0].appendChild(bootstrapJs); ReactDOM.render( + enableSpectrograms={enableSpectrograms} + flashVocodesNotice={flashVocodesNotice} + /> , - document.getElementById('root') + document.getElementById("root") ); // If you want your app to work offline and load faster, you can change diff --git a/packages/fakeyou.com/src/scss/custom-bootstrap.scss b/packages/fakeyou.com/src/scss/custom-bootstrap.scss new file mode 100644 index 0000000000..af52e438e1 --- /dev/null +++ b/packages/fakeyou.com/src/scss/custom-bootstrap.scss @@ -0,0 +1,11 @@ +// Override the $spacers variable +$spacers: ( + 0: 0, + 1: 0.25rem, + 2: 0.5rem, + 3: 1rem, + 4: 1.75rem, + 5: 2rem, +); + +@import "~bootstrap/scss/bootstrap"; diff --git a/packages/fakeyou.com/src/scss/site-refresh.scss b/packages/fakeyou.com/src/scss/site-refresh.scss index b2b3462e19..bd95287c79 100644 --- a/packages/fakeyou.com/src/scss/site-refresh.scss +++ b/packages/fakeyou.com/src/scss/site-refresh.scss @@ -168,11 +168,6 @@ styles with important tags: padding-bottom: 0.4rem !important; } - .py-4 { - padding-top: 2rem !important; - padding-bottom: 2rem !important; - } - .lead { color: rgba($white, 0.8); font-size: 17px; @@ -288,6 +283,10 @@ styles with important tags: border-radius: 50px; } + .bg-panel { + background-color: lighten($panel, 1%); + } + .panel { position: relative; width: 100%; @@ -1481,10 +1480,6 @@ textarea { } } - .p-lg-4 { - padding: 2rem !important; - } - .lead { font-size: 18px; } @@ -1551,9 +1546,5 @@ textarea { height: 100%; border-radius: 0.5rem; } - - .p-md-4 { - padding: 2rem !important; - } } } diff --git a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx index 667e86bdcb..51c2a7f5f8 100644 --- a/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx +++ b/packages/fakeyou.com/src/v2/view/pages/media/MediaPage.tsx @@ -111,31 +111,61 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { if (isLoading) return ( - - } - subText={} - /> - -
+ <> + +
+

+ +

+

+ +

+
+ + + +
+
+

+ +

+
+ +
+

+ +

+

+ +

+
+
+
+

+ +

-
-

- - -

- -

- - + + +
+ +

+ +

+

+ +

+ +
+ ); if (error || !mediaData) @@ -259,14 +289,29 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) { // ); return ( - - - + <> + +
+

{pageTitle}

+

{pageSubText}

+
+ + +
-
+
{renderMediaComponent(mediaData)}
+ +
+

Comments

+ +
@@ -322,15 +367,18 @@ export default function MediaPage({ sessionWrapper }: MediaPageProps) {
- - -

Comments

- - - + + +
+ +

Comments

+ + +
+ ); } diff --git a/yarn.lock b/yarn.lock index 12b7c816ce..57d148974a 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4569,8 +4569,8 @@ __metadata: resolution: "@storyteller/root@workspace:." dependencies: "@react-spring/types": ^9.7.3 + bootstrap: 5.1.3 craco: ^0.0.3 - date-fns: 2.22.1 lerna: ^4.0.0 yarn: ^1.22.19 languageName: unknown @@ -7281,6 +7281,15 @@ __metadata: languageName: node linkType: hard +"bootstrap@npm:5.1.3": + version: 5.1.3 + resolution: "bootstrap@npm:5.1.3" + peerDependencies: + "@popperjs/core": ^2.10.2 + checksum: 301b5ed872efba061104cf22ac93568e3837867fb5527ab9326a51510fb752bd4883e1d488225c8be72f86d9d3a55ef5b166aa7fa62c2fdd077c3f05b65752f8 + languageName: node + linkType: hard + "brace-expansion@npm:^1.1.7": version: 1.1.11 resolution: "brace-expansion@npm:1.1.11"