Merge pull request #346 from EnCiv/civ-serv

Uses Civil Server

.storybook/main.js

@@ -1,39 +1,34 @@
 const webpack = require('webpack')
 
 module.exports = {
-    stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
-    addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
-    framework: '@storybook/react',
-    core: {
-        builder: 'webpack5',
-    },
-    webpackFinal: async config => {
-        // config may or may not have these properties so we have to make sure they are there and then modify them to ensure we don't delete anything
-        if (!config.resolve) config.resolve = {}
-        if (!config.resolve.fallback) config.resolve.fallback = {}
-        Object.assign(config.resolve.fallback, {
-            fs: false,
-            buffer: require.resolve('buffer'),
-            path: require.resolve('path-browserify'),
-            stream: require.resolve('stream-browserify'),
-            os: require.resolve('os-browserify/browser'),
-            zlib: require.resolve('browserify-zlib'),
-            constants: require.resolve('constants-browserify'),
-            util: require.resolve('util'),
-        })
-        if (!config.plugins) config.plugins = []
-        config.plugins.push(new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }))
-        config.plugins.push(new webpack.ProvidePlugin({ process: 'process/browser' })) // fix "process is not defined" error: // (do "npm install process" before running the build)
-        for (const plugin of config.plugins) {
-            if (plugin.definitions) {
-                if (plugin.definitions['process.env']) {
-                    console.info(
-                        '.storybook/main.js: deleting process.env from',
-                        { plugin },
-                        'see comments in that file'
-                    )
-                    delete plugin.definitions['process.env']
-                    /* 
+  stories: ['../stories/**/*.stories.mdx', '../stories/**/*.stories.@(js|jsx|ts|tsx)'],
+  addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
+  framework: '@storybook/react',
+  core: {
+    builder: 'webpack5',
+  },
+  webpackFinal: async config => {
+    // config may or may not have these properties so we have to make sure they are there and then modify them to ensure we don't delete anything
+    if (!config.resolve) config.resolve = {}
+    if (!config.resolve.fallback) config.resolve.fallback = {}
+    Object.assign(config.resolve.fallback, {
+      fs: false,
+      buffer: require.resolve('buffer'),
+      path: require.resolve('path-browserify'),
+      stream: require.resolve('stream-browserify'),
+      os: require.resolve('os-browserify/browser'),
+      zlib: require.resolve('browserify-zlib'),
+      constants: require.resolve('constants-browserify'),
+      util: require.resolve('util'),
+    })
+    if (!config.plugins) config.plugins = []
+    config.plugins.push(new webpack.ProvidePlugin({ Buffer: ['buffer', 'Buffer'] }))
+    for (const plugin of config.plugins) {
+      if (plugin.definitions) {
+        if (plugin.definitions['process.env']) {
+          console.info('.storybook/main.js: deleting process.env from', { plugin }, 'see comments in that file')
+          delete plugin.definitions['process.env']
+          /* 
         webpack will try to string replace process.env with what is assigned in the definition. 
           // But if there is code in the browser side that does something like "if(process.env)" it will get replaced and cause syntax error and break the existing code
 
@@ -48,9 +43,9 @@ module.exports = {
         to become
         if (!{"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."}) {"NODE_ENV":"development","NODE_PATH":["/usr/lib64/node_modules"],"STORYBOOK":"true","PUBLIC_URL":"."} = {};
 */
-                }
-            }
         }
-        return config
-    },
+      }
+    }
+    return config
+  },
 }

app/components/ask-webrtc.jsx

@@ -6,6 +6,7 @@ import injectSheet from 'react-jss'
 import cx from 'classnames'
 
 import DebugOverlay from './debug-overlay'
+import DynamicFontSizeHelmet from './dynamic-font-size-helmet'
 
 const TransitionTime = 500
 const TopMargin = '0vh'
@@ -235,7 +236,7 @@ class RASPAskWebRTC extends React.Component {
   constructor(props) {
     super(props)
     if (typeof window !== 'undefined') {
-      if (window.env === 'development') this.rotateButton = true
+      if (window?.process?.env?.NODE_ENV === 'development') this.rotateButton = true
     } else {
       if (process.env.NODE_ENV === 'development') this.rotateButton = true
     }
@@ -775,6 +776,7 @@ class RASPAskWebRTC extends React.Component {
         style={{ position: 'relative', left: this.state.left, width: '100vw' }}
         ref={this.fixupLeft}
       >
+        <DynamicFontSizeHelmet />
         <DebugOverlay ref={this.debugOverlayRef} />
         <div className={classes['outerBox']}>
           {Object.keys(participants).map(videoBox)}

app/components/dynamic-font-size-helmet.js

@@ -0,0 +1,17 @@
+import { Helmet } from 'react-helmet'
+
+const DynamicFontSizeHelmet =
+  typeof window === 'undefined'
+    ? () => (
+        <Helmet
+          script={[
+            {
+              type: 'text/javascript',
+              innerHTML: `function setFontSize(){document.getElementsByTagName("html")[0].style.fontSize=Math.round(Math.min(window.innerWidth,window.innerHeight))/100*(15/(1080/100))+'px'}; addEventListener('resize',setFontSize); setFontSize();`,
+            },
+          ]}
+        />
+      )
+    : () => null
+
+export default DynamicFontSizeHelmet

app/components/lib/create-participant.js

@@ -18,6 +18,16 @@ function allThere(array, length) {
   return array.length === length && array.every(i => typeof i !== 'undefined')
 }
 
+// webpack might include process.browser but if it doesn't the pipe opertion below needs process.nextTick
+if (typeof window !== 'undefined') {
+  if (typeof process === 'undefined') window.process = {}
+  if (!process.nextTick)
+    window.process.nextTick = (...args) => {
+      const func = args.shift()
+      setTimeout(() => func.apply(null, args))
+    }
+}
+
 export default function createParticipant(props, human, userId, name, progressFunc, listeningRound, listeningSeat) {
   var transferred = 0
   var totalSize = 0

app/web-components/candidate-conversation.jsx

@@ -40,6 +40,7 @@ import { auto_quality, placeholder_image } from '../components/lib/cloudinary-ur
 import createParticipant from '../components/lib/create-participant'
 import BeginButton from '../components/begin-button'
 import DonateButton from '../components/donate-button'
+import DynamicFontSizeHelmet from '../components/dynamic-font-size-helmet'
 
 function promiseSleep(time) {
   return new Promise((ok, ko) => setTimeout(ok, time))
@@ -562,7 +563,7 @@ class RASPUndebate extends React.Component {
     super(props)
     if (typeof window !== 'undefined') {
       this.startTime = Date.now()
-      if (window.env === 'development') this.rotateButton = true
+      if (window?.process?.env?.NODE_ENV === 'development') this.rotateButton = true
     } else {
       if (process.env.NODE_ENV === 'development') this.rotateButton = true
     }
@@ -1293,7 +1294,7 @@ class RASPUndebate extends React.Component {
   preFetchObjectURL(part, speaking, round) {
     if (!this.props.participants[part]) return // part may not exist in this debate
 
-    if (true /*window.env!=='production' || this.participants[part].youtube */) {
+    if (true /*window.process.env.NODE_ENV!=='production' || this.participants[part].youtube */) {
       // in development, don'e prefetch the videos because they won't be cached by the browser and you'll end up consuming a lot of extra cloudinary bandwith, on youtube we can't prefetch
       logger.trace("CandidateConversation.preFetchObjectURl - in development we don't prefetch", part, speaking, round)
       this.setExternalObjectURL(part, speaking, round)
@@ -1404,7 +1405,8 @@ class RASPUndebate extends React.Component {
         this.participants[part].youtubePlayer.playVideo()
     } else {
       let element = this.participants[part].element.current
-      if (element.src === objectURL) {
+      if (element.src === objectURL && element.loop) {
+        // element.loop because if there is only the moderator, and the next position is playing the same video we need to start playing it again. This is only for when the listening segment is the same for this position and the laste
         return // don't change it.
       }
       //element.src=null;
@@ -2668,6 +2670,7 @@ class RASPUndebate extends React.Component {
 
     return (
       <div className={cx(classes['wrapper'], scrollableIframe && classes['scrollableIframe'])}>
+        <DynamicFontSizeHelmet />
         {this.props.participants.human && <ReactCameraRecorder ref={this.getCamera} />}
         <section
           id="syn-ask-webrtc"

app/web-components/cc-wrapper/index.js

@@ -8,6 +8,7 @@ import CanNotRecordHere from './can-not-record-here'
 import ViewerRecorder from './viewer-recorder'
 import Precheck from './precheck'
 import useMicCameraConstraints from './mic-camera-constraints'
+import DynamicFontSizeHelmet from '../../components/dynamic-font-size-helmet'
 
 const pages = {
   CandidatePreamble: WrappedCandidatePreamble,
@@ -22,7 +23,7 @@ const PTS = Object.keys(pages).reduce((PTS, k) => ((PTS[k] = k), PTS), {}) //
 
 // through an error if someone tries to get a property that isn't defined
 const throwIfUndefined = {
-  get: function(obj, prop) {
+  get: function (obj, prop) {
     if (prop in obj) return obj[prop]
     throw Error('undefined action TYPE: ' + prop)
   },
@@ -84,6 +85,7 @@ function CcWrapper(props) {
   })
   return (
     <div className={cx(classes['wrapper'], ccState.pageToShow !== PTS.ViewerRecorder && classes['scrollable'])}>
+      <DynamicFontSizeHelmet />
       <Page
         {...props}
         dispatch={dispatch}

app/web-components/cc-wrapper/viewer-camera-logic.jsx

@@ -411,7 +411,7 @@ export default class ViewerRecorderLogic extends React.Component {
   preFetchObjectURL(part, speaking, round) {
     if (!this.props.participants[part]) return // part may not exist in this debate
 
-    if (true /*window.env!=='production' || this.props.ccState.participants[part].youtube */) {
+    if (true /*window.process.env.NODE_ENV!=='production' || this.props.ccState.participants[part].youtube */) {
       // in development, don'e prefetch the videos because they won't be cached by the browser and you'll end up consuming a lot of extra cloudinary bandwith, on youtube we can't prefetch
       logger.trace("undebate.preFetchObjectURl - in development we don't prefetch", part, speaking, round)
       this.setExternalObjectURL(part, speaking, round)
@@ -509,7 +509,8 @@ export default class ViewerRecorderLogic extends React.Component {
         this.props.ccState.participants[part].youtubePlayer.playVideo()
     } else {
       let element = this.props.ccState.participants[part].element.current
-      if (element.src === objectURL) {
+      if (element.src === objectURL && element.loop) {
+        // element.loop because if there is only the moderator, and the next position is playing the same video we need to start playing it again. This is only for when the listening segment is the same for this position and the laste
         return // don't change it.
       }
       //element.src=null;

app/web-components/undebate.jsx

@@ -42,6 +42,7 @@ import { auto_quality, placeholder_image } from '../components/lib/cloudinary-ur
 import createParticipant from '../components/lib/create-participant'
 import Modal from '../components/Modal'
 import Icon from '../components/lib/icon'
+import DynamicFontSizeHelmet from '../components/dynamic-font-size-helmet'
 
 function promiseSleep(time) {
   return new Promise((ok, ko) => setTimeout(ok, time))
@@ -639,7 +640,7 @@ class Undebate extends React.Component {
     super(props)
     if (typeof window !== 'undefined') {
       this.startTime = Date.now()
-      if (window.env === 'development') this.rotateButton = true
+      if (window?.process?.env?.NODE_ENV === 'development') this.rotateButton = true
     } else {
       if (process.env.NODE_ENV === 'development') this.rotateButton = true
     }
@@ -1490,7 +1491,7 @@ class Undebate extends React.Component {
   preFetchObjectURL(part, speaking, round) {
     if (!this.props.participants[part]) return // part may not exist in this debate
 
-    if (true /*window.env!=='production' || this.participants[part].youtube */) {
+    if (true /*window.process.env.NODE_ENV!=='production' || this.participants[part].youtube */) {
       // in development, don'e prefetch the videos because they won't be cached by the browser and you'll end up consuming a lot of extra cloudinary bandwith, on youtube we can't prefetch
       logger.trace("undebate.preFetchObjectURl - in development we don't prefetch", part, speaking, round)
       this.setExternalObjectURL(part, speaking, round)
@@ -1587,7 +1588,8 @@ class Undebate extends React.Component {
         this.participants[part].youtubePlayer.playVideo()
     } else {
       let element = this.participants[part].element.current
-      if (element.src === objectURL) {
+      if (element.src === objectURL && element.loop) {
+        // element.loop because if there is only the moderator, and the next position is playing the same video we need to start playing it again. This is only for when the listening segment is the same for this position and the laste
         return // don't change it.
       }
       //element.src=null;
@@ -3169,6 +3171,7 @@ class Undebate extends React.Component {
         style={{ fontSize: fontSize }}
         className={cx(classes['wrapper'], scrollableIframe && classes['scrollableIframe'])}
       >
+        <DynamicFontSizeHelmet />
         {isPortraitPhoneRecording ? (
           <Modal
             render={() => (

build.sh

@@ -0,0 +1,53 @@
+#!/bin/bash
+
+#*************************************************************************'
+# These directoies need to exist in dist, even if you don't have them in your project
+# *************************************************************************'
+
+mkdir -p dist/events
+mkdir -p dist/routes
+mkdir -p dist/socket-apis
+mkdir -p dist/data-components
+mkdir -p dist/web-components
+#
+# assets is where static files go
+#
+mkdir -p ./assets/js/
+# you can start with the favicon images from civil-server - but you should to replace them with your own some day
+mkdir -p ./assets/images
+cp -rp node_modules/civil-server/assets/images ./assets/images
+
+#
+# Update/create web-components/index.js to require all react components in that director, and in the listed child/peer directories. Web components are used by the getIota route - which uses reactServerRender
+#
+react-directory-indexer app/web-components/ node_modules/civil-server/dist/web-components/ || {
+  echo Could not build web-components
+  exit 1
+}
+#
+# Update/create data-components/index.js to require all data-components in that director, and in the listed child/peer directories. Data components are used by the getIota route.
+#
+react-directory-indexer --data app/data-components/ node_modules/civil-server/dist/data-components/ || {
+  echo Could not build data-components
+  exit 1
+}
+
+npm run svgr || {
+  echo Could not svgr
+  exit 1
+}
+
+npm run transpile  || {
+  echo Could not transpile;
+  exit 1
+}
+
+# don't run webpack if this is a dependency of another project - the memory usage will blow out heroku build 
+if test \"$NPM_PROJECT\" = \"\" || test \"$NPM_PROJECT\" == \"undebate\" ; then {
+  npm run packbuild  || {
+    echo Could not webpack;
+    exit 1
+  }
+}; fi
+
+