pic-collage-live

Components for building realtime collaborative collage editors with Typescript.

Dependencies

+-----------------------------------------------------------------------------+
|                                      APP                                    |
+--------------+-----------------+---------+--------------------+-------------+
|  app_common  | editor_sidemenu | persons |  templates_browser |  pc_server  |      
+--------------+-----------------+---------+--------------------+-------------+
|                                    collager                                 |                         
+-----------------------------------------------------------------------------+
|      collage_firebase     |      text_editor      |      path_editor        |
+---------------------------+-----------------------+-------------------------+
|                           |     fonts_firebase    |                         |
+-----------------------------------------------------------------------------+
|                                collage_toolkit                              |
+-----------------------------------------------------------------------------+
|                                     CBJS                                    |
+-----------------------------------------------------------------------------+

Mobile/desktop dependencies

• TextEditor => horizontal/vertical/mobile
• CreatorView => ResponsiveView => MobileHeaderView/DesktopHeaderView
• manipulateAddText
  • manipulateEditTextModal
  • manipulateEditTextModeless
• CollagerEditWidget/CollagerEditView => isMobile$
  • manipulateEditTextModal
    • mobile
  • manipulateEditTextModeless
    • vertical
  • (horizontal is unused?)

CBJS Dependencies

• PersonPlugin

• BulletinContext

• MDDV utils (Widget, Context, Command, Manipulator)

• Base types (Point, Color, Font, etc.)

• Serialization utilities (fieldTo_, structTo_)

• Firebase utilities (sync_, etc.)

• Rx utilities (operators, useBehaviorSubject, promise$)

• Generic utilities (logging, etc.)

• View utilities (Portal, IAnimation)

• Gesture utilities (Touch -> Rx)

Setting up Firebase

• Rules for Storage access
• Rules for Firebase access
• CORS cloud setup (see below)
• We serve index.html via /functions (for OG rewriting), so need to:
  • After build, copy index.html (see package.json)
  • Make sure functions works, so need to change from "Free" plan to "Pay as you go" in "Usage and billing".
  • Setup to serve as a single-page-app.

CORS domain on bucket stickers:

https://stackoverflow.com/questions/37760695/firebase-storage-and-access-control-allow-origin

• Go to https://console.cloud.google.com/home

• "Activate Google Cloud Shell" (upper right menu bar).

• Create a file (cors.json):

  [ { "origin": ["*"], "method": ["GET"], "maxAgeSeconds": 3600 } ]

• gsutil cors set cors.json gs://pic-collage-live.appspot.com

Emulator

https://firebase.google.com/docs/database/security/test-rules-emulator firebase setup:emulators:firestore

Setting up Staging

• firebase login:ci to generate "token".
• Setup separate "token" on CI as different environment variable.
• In config.yml setup different jobs that use separate environment variable.
• Setup different CI "Contexts" for each with different environment variables
  for the Firebase configuration. https://ui.circleci.com/settings/organization/github/cardinalblue/contexts?return-to=https%3A%2F%2Fcircleci.com%2Fdashboard

Issue with face-api.js:

• https://github.com/justadudewhohacks/face-api.js/issues/455

Debugging on the device tips

• Install Android Studio.
• Make sure adb is in the path (~/Library/...).
• Run adb devices so that Chrome can see it.

Live Coding 1 (2019-06-14)

• MagicDotWidget
  • Create
  • Prop
• ScrapWidget
• Check if not for other gestures
• MagicDotView
  • Follow position
  • Hide if no position
• Calculate position of MagicDot (RELATIVE)
• Trigger manipulator from gesture
• Code manipulator

Code Splitting

This section has moved here: https://facebook.github.io/create-react-app/docs/code-splitting

Analyzing the Bundle Size

This section has moved here: https://facebook.github.io/create-react-app/docs/analyzing-the-bundle-size

Making a Progressive Web App

This section has moved here: https://facebook.github.io/create-react-app/docs/making-a-progressive-web-app

Advanced Configuration

This section has moved here: https://facebook.github.io/create-react-app/docs/advanced-configuration

Deployment

This section has moved here: https://facebook.github.io/create-react-app/docs/deployment

npm run build fails to minify

This section has moved here: https://facebook.github.io/create-react-app/docs/troubleshooting#npm-run-build-fails-to-minify

Serve index.html from node server locally

NOTE: This is NOT server side rendering for React. It's just a mechanism to generate dynamic html file for meta tag information.

Requirements

• Install the Firebase CLI

npm install -g firebase-tools

• Install packages in functions directory

yarn

• Make sure node version is consistent with functions(node 10)

yarn serve