[web] Various minor fixes and improvements to cast (#1250)

- Use 3001 for sidecars
- Use the placeholder as the placeholder, not as the label
- Change slideshow time from 5s => 10s
- Remove the 123456 below the actual code
- Make the code copyable without inserting spaces in between

web/apps/cast/src/components/LargeType.tsx

@@ -1,3 +1,5 @@
+import styled from "@emotion/styled";
+
 const colourPool = [
     "#87CEFA", // Light Blue
     "#90EE90", // Light Green
@@ -23,44 +25,41 @@ const colourPool = [
 
 export default function LargeType({ chars }: { chars: string[] }) {
     return (
-        <table
-            style={{
-                fontSize: "4rem",
-                fontWeight: "bold",
-                fontFamily: "monospace",
-                display: "flex",
-                position: "relative",
-            }}
-        >
+        <Container style={{}}>
             {chars.map((char, i) => (
-                <tr
+                <span
                     key={i}
                     style={{
-                        display: "flex",
-                        flexDirection: "column",
-                        alignItems: "center",
-                        padding: "0.5rem",
                         // alternating background
                         backgroundColor: i % 2 === 0 ? "#2e2e2e" : "#5e5e5e",
+                        // varying colors
+                        color: colourPool[i % colourPool.length],
                     }}
                 >
-                    <span
-                        style={{
-                            color: colourPool[i % colourPool.length],
-                            lineHeight: 1.2,
-                        }}
-                    >
-                        {char}
-                    </span>
-                    <span
-                        style={{
-                            fontSize: "1rem",
-                        }}
-                    >
-                        {i + 1}
-                    </span>
-                </tr>
+                    {char}
+                </span>
             ))}
-        </table>
+        </Container>
     );
 }
+
+const Container = styled.div`
+    font-size: 4rem;
+    font-weight: bold;
+    font-family: monospace;
+
+    line-height: 1.2;
+
+    /*
+     * -  We want them to be spans so that when the text is copy pasted, there
+     *    is no extra whitespace inserted.
+     *
+     * -  But we also want them to have a block level padding.
+     *
+     * To achieve both these goals, make them inline-blocks
+     */
+    span {
+        display: inline-block;
+        padding: 0.5rem;
+    }
+`;

web/apps/cast/src/components/Theatre/PhotoAuditorium.tsx

@@ -20,9 +20,9 @@ export default function PhotoAuditorium({
 
         if (nextSlidePrerendered) {
             const elapsedTime = prerenderTime ? Date.now() - prerenderTime : 0;
-            const delayTime = Math.max(5000 - elapsedTime, 0);
+            const delayTime = Math.max(10000 - elapsedTime, 0);
 
-            if (elapsedTime >= 5000) {
+            if (elapsedTime >= 10000) {
                 setShowPreloadedNextSlide(true);
             } else {
                 timeout = setTimeout(() => {

web/apps/cast/src/pages/slideshow.tsx

@@ -59,21 +59,12 @@ export default function Slideshow() {
         }
     };
 
-    const init = async () => {
-        try {
-            const castToken = window.localStorage.getItem("castToken");
-            setCastToken(castToken);
-        } catch (e) {
-            logError(e, "error during sync");
-            router.push("/");
-        }
-    };
-
     useEffect(() => {
         if (castToken) {
             const intervalId = setInterval(() => {
                 syncCastFiles(castToken);
-            }, 5000);
+            }, 10000);
+            syncCastFiles(castToken);
 
             return () => clearInterval(intervalId);
         }
@@ -105,7 +96,20 @@ export default function Slideshow() {
     const router = useRouter();
 
     useEffect(() => {
-        init();
+        try {
+            const castToken = window.localStorage.getItem("castToken");
+            // Wait 2 seconds to ensure the green tick and the confirmation
+            // message remains visible for at least 2 seconds before we start
+            // the slideshow.
+            const timeoutId = setTimeout(() => {
+                setCastToken(castToken);
+            }, 2000);
+
+            return () => clearTimeout(timeoutId);
+        } catch (e) {
+            logError(e, "error during sync");
+            router.push("/");
+        }
     }, []);
 
     useEffect(() => {

web/apps/photos/src/components/Collections/CollectionOptions/AlbumCastDialog.tsx

@@ -225,7 +225,8 @@ export default function AlbumCastDialog(props: Props) {
                     <SingleInputForm
                         callback={onSubmit}
                         fieldType="text"
-                        placeholder={"123456"}
+                        realLabel={"Code"}
+                        realPlaceholder={"123456"}
                         buttonText={t("PAIR_DEVICE_TO_TV")}
                         submitButtonProps={{ sx: { mt: 1, mb: 2 } }}
                     />

web/package.json

@@ -22,7 +22,7 @@
         "dev:accounts": "yarn workspace accounts next dev -p 3001",
         "dev:albums": "yarn workspace photos next dev -p 3002",
         "dev:auth": "yarn workspace auth next dev",
-        "dev:cast": "yarn workspace cast next dev",
+        "dev:cast": "yarn workspace cast next dev -p 3001",
         "dev:payments": "yarn workspace payments next dev -p 3001",
         "dev:photos": "yarn workspace photos next dev",
         "lint": "yarn prettier --check . && yarn workspaces run eslint .",

web/packages/shared/components/SingleInputForm.tsx

@@ -18,7 +18,27 @@ export interface SingleInputFormProps {
         resetForm: (nextState?: Partial<FormikState<formValues>>) => void,
     ) => Promise<void>;
     fieldType: "text" | "email" | "password";
-    placeholder: string;
+    /** deprecated: Use realPlaceholder */
+    placeholder?: string;
+    /**
+     * Placeholder
+     *
+     * The existing `placeholder` property uses the placeholder as a label (i.e.
+     * it doesn't appear as the placeholder within the text input area but
+     * rather as the label on top of it). This happens conditionally, so it is
+     * not a matter of simple rename.
+     *
+     * Gradually migrate the existing UI to use this property when we really
+     * want a placeholder, and then create a separate label property for places
+     * that actually want to set the label.
+     */
+    realPlaceholder?: string;
+    /**
+     * Label to show on top of the text input area.
+     *
+     * Sibling of {@link realPlaceholder}.
+     */
+    realLabel?: string;
     buttonText: string;
     submitButtonProps?: any;
     initialValue?: string;
@@ -102,7 +122,12 @@ export default function SingleInputForm(props: SingleInputFormProps) {
                         name={props.fieldType}
                         {...(props.hiddenLabel
                             ? { placeholder: props.placeholder }
-                            : { label: props.placeholder })}
+                            : props.realPlaceholder
+                              ? {
+                                    placeholder: props.realPlaceholder,
+                                    label: props.realLabel,
+                                }
+                              : { label: props.placeholder })}
                         value={values.inputValue}
                         onChange={handleChange("inputValue")}
                         error={Boolean(errors.inputValue)}