removed airbnb defaults and updated Track Provider

.eslintrc

@@ -1,18 +1,13 @@
 {
-  "extends": ["airbnb", "airbnb/hooks", "prettier"],
+  "extends": ["next/core-web-vitals", "prettier"],
-  "parser": "babel-eslint",
   "env": {
     "browser": true,
     "node": true,
     "es6": true
   },
   "rules": {
-    "no-console": 0,
-    "react/jsx-props-no-spreading": 0,
-    "react/forbid-prop-types": 0,
-    "react/require-default-props": 0,
-    "react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }],
     "import/no-extraneous-dependencies": 0,
+    "@next/next/no-img-element": 0,
     "import/order": [
       "error",
       {

dailyjs/basic-call/components/App/App.js

@@ -4,7 +4,7 @@ import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
 import { useCallUI } from '@dailyjs/shared/hooks/useCallUI';
 
 import PropTypes from 'prop-types';
-import Room from '../Room';
+import { Room } from '../Call/Room';
 import { Asides } from './Asides';
 import { Modals } from './Modals';
 

dailyjs/basic-call/components/Call/Container.js

@@ -4,9 +4,9 @@ import { BasicTray } from '@dailyjs/shared/components/Tray';
 import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
 import useJoinSound from '@dailyjs/shared/hooks/useJoinSound';
 import PropTypes from 'prop-types';
-import WaitingRoom from '../WaitingRoom';
+import { WaitingRoom } from './WaitingRoom';
 
-export const RoomContainer = ({ children }) => {
+export const Container = ({ children }) => {
   const { isOwner } = useParticipants();
 
   useJoinSound();
@@ -42,8 +42,8 @@ export const RoomContainer = ({ children }) => {
   );
 };
 
-RoomContainer.propTypes = {
+Container.propTypes = {
   children: PropTypes.node,
 };
 
-export default RoomContainer;
+export default Container;

dailyjs/basic-call/components/Call/Header.js

@@ -10,7 +10,13 @@ export const Header = () => {
   return useMemo(
     () => (
       <header className="room-header">
-        <img src="assets/daily-logo.svg" alt="Daily" className="logo" />
+        <img
+          src="/assets/daily-logo.svg"
+          alt="Daily"
+          className="logo"
+          width="80"
+          height="32"
+        />
 
         <HeaderCapsule>Basic call demo</HeaderCapsule>
         <HeaderCapsule>

dailyjs/basic-call/components/Call/Room.js

@@ -1,17 +1,17 @@
 import React from 'react';
 import VideoContainer from '@dailyjs/shared/components/VideoContainer/VideoContainer';
 
-import { VideoGrid } from '../VideoGrid';
+import { Container } from './Container';
 import { Header } from './Header';
-import { RoomContainer } from './RoomContainer';
+import { VideoGrid } from './VideoGrid';
 
 export const Room = () => (
-  <RoomContainer>
+  <Container>
     <Header />
     <VideoContainer>
       <VideoGrid />
     </VideoContainer>
-  </RoomContainer>
+  </Container>
 );
 
 export default Room;

dailyjs/basic-call/components/CreatingRoom/index.js

@@ -1,2 +0,0 @@
-export { CreatingRoom as default } from './CreatingRoom';
-export { CreatingRoom } from './CreatingRoom';

dailyjs/basic-call/components/Intro/index.js

@@ -1,3 +0,0 @@
-export { Intro as default } from './Intro';
-export { Intro } from './Intro';
-export { NotConfigured } from './NotConfigured';

dailyjs/basic-call/components/Room/index.js

@@ -1,2 +0,0 @@
-export { Room as default } from './Room';
-export { RoomContainer } from './RoomContainer';

dailyjs/basic-call/components/VideoGrid/index.js

@@ -1,2 +0,0 @@
-export { VideoGrid as default } from './VideoGrid';
-export { VideoGrid } from './VideoGrid';

dailyjs/basic-call/components/WaitingRoom/index.js

@@ -1 +0,0 @@
-export { WaitingRoom as default } from './WaitingRoom';

dailyjs/basic-call/env.example

@@ -6,3 +6,6 @@ DAILY_API_KEY=
 
 # Daily REST API endpoint
 DAILY_REST_DOMAIN=https://api.daily.co/v1
+
+# Run in demo mode (will create a demo room for you to try)
+DAILY_DEMO_MODE=0

dailyjs/basic-call/package.json

@@ -11,10 +11,8 @@
   },
   "dependencies": {
     "@dailyjs/shared": "*",
-    "next": "^11.0.0",
+    "next": "^11.1.2",
-    "pluralize": "^8.0.0",
+    "pluralize": "^8.0.0"
-    "react": "^17.0.2",
-    "react-dom": "^17.0.2"
   },
   "devDependencies": {
     "babel-plugin-module-resolver": "^4.1.0",

dailyjs/basic-call/pages/_app.js

@@ -1,5 +1,4 @@
 import React from 'react';
-import GlobalHead from '@dailyjs/shared/components/GlobalHead';
 import GlobalStyle from '@dailyjs/shared/components/GlobalStyle';
 import Head from 'next/head';
 import PropTypes from 'prop-types';
@@ -10,7 +9,6 @@ function App({ Component, pageProps }) {
       <Head>
         <title>Daily - {process.env.PROJECT_TITLE}</title>
       </Head>
-      <GlobalHead />
       <GlobalStyle />
       <Component
         asides={App.asides}

dailyjs/basic-call/pages/_document.js

@@ -0,0 +1,23 @@
+import Document, { Html, Head, Main, NextScript } from 'next/document';
+
+class MyDocument extends Document {
+  render() {
+    return (
+      <Html>
+        <Head>
+          <link rel="preconnect" href="https://fonts.gstatic.com" />
+          <link
+            href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=optional"
+            rel="stylesheet"
+          />
+        </Head>
+        <body>
+          <Main />
+          <NextScript />
+        </body>
+      </Html>
+    );
+  }
+}
+
+export default MyDocument;

dailyjs/basic-call/pages/index.js

@@ -8,8 +8,8 @@ import { WaitingRoomProvider } from '@dailyjs/shared/contexts/WaitingRoomProvide
 import getDemoProps from '@dailyjs/shared/lib/demoProps';
 import PropTypes from 'prop-types';
 import App from '../components/App';
-import { CreatingRoom } from '../components/CreatingRoom';
+import { CreatingRoom } from '../components/Prejoin/CreatingRoom';
-import { Intro, NotConfigured } from '../components/Intro';
+import { Intro, NotConfigured } from '../components/Prejoin/Intro';
 
 /**
  * Index page
@@ -22,7 +22,6 @@ import { Intro, NotConfigured } from '../components/Intro';
 export default function Index({
   domain,
   isConfigured = false,
-  predefinedRoom = '',
   forceFetchToken = false,
   forceOwner = false,
   subscribeToTracksAutomatically = true,
@@ -32,7 +31,7 @@ export default function Index({
   customTrayComponent,
   customAppComponent,
 }) {
-  const [roomName, setRoomName] = useState(predefinedRoom);
+  const [roomName, setRoomName] = useState();
   const [fetchingToken, setFetchingToken] = useState(false);
   const [token, setToken] = useState();
   const [tokenError, setTokenError] = useState();
@@ -137,7 +136,6 @@ export default function Index({
 
 Index.propTypes = {
   isConfigured: PropTypes.bool.isRequired,
-  predefinedRoom: PropTypes.string,
   domain: PropTypes.string,
   asides: PropTypes.arrayOf(PropTypes.func),
   modals: PropTypes.arrayOf(PropTypes.func),

dailyjs/live-fitness/.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["inline-react-svg"]
+}

dailyjs/live-fitness/components/App/App.js

@@ -0,0 +1,13 @@
+import React from 'react';
+
+import App from '@dailyjs/basic-call/components/App';
+import { RecordingProvider } from '../../contexts/RecordingProvider';
+
+// Extend our basic call app component with the recording context
+export const AppWithRecording = () => (
+  <RecordingProvider>
+    <App />
+  </RecordingProvider>
+);
+
+export default AppWithRecording;

dailyjs/live-fitness/components/App/index.js

@@ -0,0 +1 @@
+export { AppWithRecording as default } from './App';

dailyjs/live-fitness/components/Tray/Tray.js

@@ -0,0 +1,47 @@
+import React, { useEffect } from 'react';
+
+import { TrayButton } from '@dailyjs/shared/components/Tray';
+import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import { ReactComponent as IconRecord } from '@dailyjs/shared/icons/record-md.svg';
+
+import {
+  RECORDING_ERROR,
+  RECORDING_RECORDING,
+  RECORDING_SAVED,
+  RECORDING_UPLOADING,
+  useRecording,
+} from '../../contexts/RecordingProvider';
+import { RECORDING_MODAL } from '../RecordingModal';
+
+export const Tray = () => {
+  const { openModal } = useUIState();
+  const { recordingState } = useRecording();
+
+  useEffect(() => {
+    console.log(`⏺️ Recording state: ${recordingState}`);
+
+    if (recordingState === RECORDING_ERROR) {
+      // show error modal here
+    }
+  }, [recordingState]);
+
+  const isRecording = [
+    RECORDING_RECORDING,
+    RECORDING_UPLOADING,
+    RECORDING_SAVED,
+  ].includes(recordingState);
+
+  return (
+    <>
+      <TrayButton
+        label={isRecording ? 'Recording' : 'Record'}
+        orange={isRecording}
+        onClick={() => openModal(RECORDING_MODAL)}
+      >
+        <IconRecord />
+      </TrayButton>
+    </>
+  );
+};
+
+export default Tray;

dailyjs/live-fitness/components/Tray/index.js

@@ -0,0 +1 @@
+export { Tray as default } from './Tray';

dailyjs/live-fitness/env.example

@@ -0,0 +1,8 @@
+# Domain excluding 'https://' and 'daily.co' e.g. 'somedomain'
+DAILY_DOMAIN=
+
+# Obtained from https://dashboard.daily.co/developers
+DAILY_API_KEY=
+
+# Daily REST API endpoint
+DAILY_REST_DOMAIN=https://api.daily.co/v1

dailyjs/live-fitness/next.config.js

@@ -0,0 +1,13 @@
+const withPlugins = require('next-compose-plugins');
+const withTM = require('next-transpile-modules')([
+  '@dailyjs/shared',
+  '@dailyjs/basic-call',
+]);
+
+const packageJson = require('./package.json');
+
+module.exports = withPlugins([withTM], {
+  env: {
+    PROJECT_TITLE: packageJson.description,
+  },
+});

dailyjs/live-fitness/package.json

@@ -0,0 +1,25 @@
+{
+  "name": "@dailyjs/live-fitness",
+  "description": "Live Fitness",
+  "version": "0.1.0",
+  "private": true,
+  "scripts": {
+    "dev": "next dev",
+    "build": "next build",
+    "start": "next start",
+    "lint": "next lint"
+  },
+  "dependencies": {
+    "@dailyjs/shared": "*",
+    "@dailyjs/basic-call": "*",
+    "next": "^11.0.0",
+    "pluralize": "^8.0.0",
+    "react": "^17.0.2",
+    "react-dom": "^17.0.2"
+  },
+  "devDependencies": {
+    "babel-plugin-module-resolver": "^4.1.0",
+    "next-compose-plugins": "^2.2.1",
+    "next-transpile-modules": "^8.0.0"
+  }
+}

dailyjs/live-fitness/pages/_app.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import App from '@dailyjs/basic-call/pages/_app';
+import AppWithRecording from '../components/App';
+
+import { RecordingModal } from '../components/RecordingModal';
+import Tray from '../components/Tray';
+
+App.modals = [RecordingModal];
+App.customAppComponent = <AppWithRecording />;
+App.customTrayComponent = <Tray />;
+
+export default App;

dailyjs/live-fitness/pages/api

@@ -0,0 +1 @@
+../../basic-call/pages/api

dailyjs/live-fitness/pages/index.js

@@ -0,0 +1,16 @@
+import Index from '@dailyjs/basic-call/pages';
+import getDemoProps from '@dailyjs/shared/lib/demoProps';
+
+export async function getStaticProps() {
+  const defaultProps = getDemoProps();
+
+  return {
+    props: {
+      ...defaultProps,
+      forceFetchToken: true,
+      forceOwner: true,
+    },
+  };
+}
+
+export default Index;

dailyjs/live-fitness/public

@@ -0,0 +1 @@
+../basic-call/public

dailyjs/live-streaming/README.md

@@ -34,7 +34,7 @@ In this example we extend the [basic call demo](../basic-call) with live streami
 
 We pass a custom tray object, a custom app object (wrapping the original in a new `LiveStreamingProvider`) and a custom modal. We also symlink both the `public` and `pages/api` folders from the basic call.
 
-Single live streaming is only available to call owners, you must create a token when joining the call (for simplicity, we have disabled the abiltiy to join the call as a guest.)
+Single live streaming is only available to call owners, you must create a token when joining the call (for simplicity, we have disabled the ability to join the call as a guest.)
 
 ## Deploy your own on Vercel
 

dailyjs/shared/components/GlobalHead/GlobalHead.js

@@ -1,14 +0,0 @@
-import React from 'react';
-import Head from 'next/head';
-
-export const GlobalHead = () => (
-  <Head>
-    <link rel="preconnect" href="https://fonts.gstatic.com" />
-    <link
-      href="https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600&display=optional"
-      rel="stylesheet"
-    />
-  </Head>
-);
-
-export default GlobalHead;

dailyjs/shared/components/GlobalHead/index.js

@@ -1,2 +0,0 @@
-export { GlobalHead as default } from './GlobalHead';
-export { GlobalHead } from './GlobalHead';

dailyjs/shared/contexts/MediaDeviceProvider.js

@@ -1,15 +1,15 @@
-import React, { useState, useEffect, createContext, useContext } from 'react';
+import React, { createContext, useContext } from 'react';
 import PropTypes from 'prop-types';
 
 import { useCallState } from './CallProvider';
+import { useParticipants } from './ParticipantsProvider';
 import { useDevices } from './useDevices';
 
 export const MediaDeviceContext = createContext();
 
 export const MediaDeviceProvider = ({ children }) => {
   const { callObject } = useCallState();
-  const [isCamMuted, setIsCamMuted] = useState(false);
+  const { localParticipant } = useParticipants();
-  const [isMicMuted, setIsMicMuted] = useState(false);
 
   const {
     cams,
@@ -24,20 +24,6 @@ export const MediaDeviceProvider = ({ children }) => {
     setSpeakersDevice,
   } = useDevices(callObject);
 
-  useEffect(() => {
-    if (!callObject) return false;
-
-    const handleNewDeviceState = () => {
-      setIsCamMuted(!callObject.participants()?.local?.video);
-      setIsMicMuted(!callObject.participants()?.local?.audio);
-    };
-
-    callObject.on('participant-updated', handleNewDeviceState);
-    return () => {
-      callObject.off('participant-updated', handleNewDeviceState);
-    };
-  }, [callObject]);
-
   return (
     <MediaDeviceContext.Provider
       value={{
@@ -48,8 +34,8 @@ export const MediaDeviceProvider = ({ children }) => {
         micError,
         currentDevices,
         deviceState,
-        isCamMuted,
+        isCamMuted: localParticipant.isCamMuted,
-        isMicMuted,
+        isMicMuted: localParticipant.isMicMuted,
         setMicDevice,
         setCamDevice,
         setSpeakersDevice,

dailyjs/shared/contexts/TracksProvider.js

@@ -11,6 +11,7 @@ import React, {
 
 import PropTypes from 'prop-types';
 
+import { useDeepCompareEffect } from 'use-deep-compare';
 import { sortByKey } from '../lib/sortByKey';
 import { useCallState } from './CallProvider';
 import { useParticipants } from './ParticipantsProvider';
@@ -20,6 +21,8 @@ import {
   REMOVE_TRACKS,
   TRACK_STARTED,
   TRACK_STOPPED,
+  TRACK_VIDEO_UPDATED,
+  TRACK_AUDIO_UPDATED,
   tracksReducer,
 } from './tracksState';
 
@@ -111,17 +114,15 @@ export const TracksProvider = ({ children }) => {
         // participant's cam
         if (desiredSubscription === currentSubscription) return u;
 
-        return {
+        u[id] = {
-          ...u,
+          setSubscribedTracks: {
-          [id]: {
+            audio: true,
-            setSubscribedTracks: {
+            screenAudio: true,
-              audio: true,
+            screenVideo: true,
-              screenAudio: true,
+            video: desiredSubscription,
-              screenVideo: true,
-              video: desiredSubscription,
-            },
           },
         };
+        return u;
       }, {});
 
       if (Object.keys(updates).length === 0) return;
@@ -181,26 +182,25 @@ export const TracksProvider = ({ children }) => {
       joinedSubscriptionQueue.push(participant.session_id);
     };
 
-    const joinBatchInterval = setInterval(() => {
+    const joinBatchInterval = setInterval(async () => {
       if (!joinedSubscriptionQueue.length) return;
       const ids = joinedSubscriptionQueue.splice(0);
-      const callParticipants = callObject.participants();
+      const participants = callObject.participants();
+      const topology = (await callObject.getNetworkTopology())?.topology;
       const updates = ids.reduce((o, id) => {
-        const { subscribed } = callParticipants?.[id]?.tracks?.audio;
+        if (!participants?.[id]?.tracks?.audio?.subscribed) {
-        const result = { ...o[id] };
+          o[id] = {
-        if (!subscribed) {
+            setSubscribedTracks: {
-          result.setSubscribedTracks = {
+              audio: true,
-            audio: true,
+              screenAudio: true,
-            screenAudio: true,
+              screenVideo: true,
-            screenVideo: true,
+            },
           };
         }
-
+        if (topology === 'peer') {
-        if (rtcpeers?.getCurrentType?.() === 'peer-to-peer') {
+          o[id] = { setSubscribedTracks: true };
-          result.setSubscribedTracks = true;
         }
-
+        return o;
-        return { [id]: result };
       }, {});
 
       if (!subscribeToTracksAutomatically && Object.keys(updates).length0) {
@@ -222,6 +222,62 @@ export const TracksProvider = ({ children }) => {
     };
   }, [callObject, subscribeToTracksAutomatically]);
 
+  useDeepCompareEffect(() => {
+    if (!callObject) return;
+
+    const handleParticipantUpdated = ({ participant }) => {
+      const hasAudioChanged =
+        // State changed
+        participant.tracks.audio.state !==
+          state.audioTracks?.[participant.user_id]?.state ||
+        // Off/blocked reason changed
+        !deepEqual(
+          {
+            ...(participant.tracks.audio?.blocked ?? {}),
+            ...(participant.tracks.audio?.off ?? {}),
+          },
+          {
+            ...(state.audioTracks?.[participant.user_id].blocked ?? {}),
+            ...(state.audioTracks?.[participant.user_id].off ?? {}),
+          }
+        );
+      const hasVideoChanged =
+        // State changed
+        participant.tracks.video.state !==
+          state.videoTracks?.[participant.user_id]?.state ||
+        // Off/blocked reason changed
+        !deepEqual(
+          {
+            ...(participant.tracks.video?.blocked ?? {}),
+            ...(participant.tracks.video?.off ?? {}),
+          },
+          {
+            ...(state.videoTracks?.[participant.user_id].blocked ?? {}),
+            ...(state.videoTracks?.[participant.user_id].off ?? {}),
+          }
+        );
+      if (hasAudioChanged) {
+        // Update audio track state
+        dispatch({
+          type: TRACK_AUDIO_UPDATED,
+          participant,
+        });
+      }
+      if (hasVideoChanged) {
+        // Update video track state
+        dispatch({
+          type: TRACK_VIDEO_UPDATED,
+          participant,
+        });
+      }
+    };
+
+    callObject.on('participant-updated', handleParticipantUpdated);
+    return () => {
+      callObject.off('participant-updated', handleParticipantUpdated);
+    };
+  }, [callObject, state.audioTracks, state.videoTracks]);
+
   return (
     <TracksContext.Provider
       value={{

dailyjs/shared/contexts/tracksState.js

@@ -8,20 +8,22 @@
 
 import { getId, getScreenId } from './participantsState';
 
-const initialTracksState = {
+export const initialTracksState = {
   audioTracks: {},
   videoTracks: {},
 };
 
 // --- Actions ---
 
-const TRACK_STARTED = 'TRACK_STARTED';
+export const TRACK_STARTED = 'TRACK_STARTED';
-const TRACK_STOPPED = 'TRACK_STOPPED';
+export const TRACK_STOPPED = 'TRACK_STOPPED';
-const REMOVE_TRACKS = 'REMOVE_TRACKS';
+export const TRACK_VIDEO_UPDATED = 'TRACK_VIDEO_UPDATED';
+export const TRACK_AUDIO_UPDATED = 'TRACK_AUDIO_UPDATED';
+export const REMOVE_TRACKS = 'REMOVE_TRACKS';
 
 // --- Reducer and helpers --
 
-function tracksReducer(prevState, action) {
+export function tracksReducer(prevState, action) {
   switch (action.type) {
     case TRACK_STARTED: {
       const id = getId(action.participant);
@@ -94,6 +96,34 @@ function tracksReducer(prevState, action) {
       };
     }
 
+    case TRACK_VIDEO_UPDATED: {
+      const id = getId(action.participant);
+      if (action.participant?.local) {
+        // Ignore local audio from mic and screen share
+        return prevState;
+      }
+      const newAudioTracks = {
+        ...prevState.audioTracks,
+        [id]: action.participant.tracks.audio,
+      };
+      return {
+        ...prevState,
+        audioTracks: newAudioTracks,
+      };
+    }
+
+    case TRACK_AUDIO_UPDATED: {
+      const id = getId(action.participant);
+      const newVideoTracks = {
+        ...prevState.videoTracks,
+        [id]: action.participant.tracks.video,
+      };
+      return {
+        ...prevState,
+        videoTracks: newVideoTracks,
+      };
+    }
+
     case REMOVE_TRACKS: {
       const { audioTracks, videoTracks } = prevState;
       const id = getId(action.participant);
@@ -114,11 +144,3 @@ function tracksReducer(prevState, action) {
       throw new Error();
   }
 }
-
-export {
-  initialTracksState,
-  tracksReducer,
-  REMOVE_TRACKS,
-  TRACK_STARTED,
-  TRACK_STOPPED,
-};

dailyjs/shared/contexts/useCallMachine.js

@@ -53,6 +53,7 @@ export const useCallMachine = ({
    */
   const prejoinUIEnabled = async (co) => {
     const dailyRoomInfo = await co.room();
+    const { access } = co.accessState();
 
     const prejoinEnabled =
       dailyRoomInfo?.config?.enable_prejoin_ui === null
@@ -61,7 +62,12 @@ export const useCallMachine = ({
 
     const knockingEnabled = !!dailyRoomInfo?.config?.enable_knocking;
 
-    return prejoinEnabled || knockingEnabled;
+    return (
+      prejoinEnabled ||
+      (access !== ACCESS_STATE_UNKNOWN &&
+        access?.level === ACCESS_STATE_LOBBY &&
+        knockingEnabled)
+    );
   };
 
   // --- Callbacks ---

dailyjs/shared/lib/demoProps.js

@@ -3,8 +3,6 @@ export default function getDemoProps() {
     domain: process.env.DAILY_DOMAIN || null,
     // Check that both domain and key env vars are set
     isConfigured: !!process.env.DAILY_DOMAIN && !!process.env.DAILY_API_KEY,
-    // Have we predefined a room to use?
-    predefinedRoom: process.env.DAILY_ROOM || '',
     // Manual or automatic track subscriptions
     subscribeToTracksAutomatically: !process.env.MANUAL_TRACK_SUBS,
     // Are we running in demo mode? (automatically creates a short-expiry room)

yarn.lock

@@ -46,6 +46,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.13.0.tgz#806526ce125aed03373bc416a828321e3a6a33af"
   integrity sha512-ZPafIPSwzUlAoWT8DKs1W2VyF2gOWthGd5NGFMsBcMMol+ZhK+EQY/e6V96poa6PA/Bh+C9plWN0hXO1uB8AfQ==
 
+"@babel/helper-plugin-utils@^7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/helper-plugin-utils/-/helper-plugin-utils-7.14.5.tgz#5ac822ce97eec46741ab70a517971e443a70c5a9"
+  integrity sha512-/37qQCE3K0vvZKwoK4XU/irIJQdIfCJuhU5eKnNxpFDsOkgFaUAwbv+RYw6eYgsC0E4hS7r5KqGULUogqui0fQ==
+
 "@babel/helper-split-export-declaration@^7.12.13":
   version "7.12.13"
   resolved "https://registry.yarnpkg.com/@babel/helper-split-export-declaration/-/helper-split-export-declaration-7.12.13.tgz#e9430be00baf3e88b0e13e6f9d4eaf2136372b05"
@@ -58,6 +63,11 @@
   resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.12.11.tgz#c9a1f021917dcb5ccf0d4e453e399022981fc9ed"
   integrity sha512-np/lG3uARFybkoHokJUmf1QfEvRVCPbmQeUQpKow5cQ3xWrV9i3rUHodKDJPQfTVX61qKi+UdYk8kik84n7XOw==
 
+"@babel/helper-validator-identifier@^7.14.9":
+  version "7.14.9"
+  resolved "https://registry.yarnpkg.com/@babel/helper-validator-identifier/-/helper-validator-identifier-7.14.9.tgz#6654d171b2024f6d8ee151bf2509699919131d48"
+  integrity sha512-pQYxPY0UP6IHISRitNe8bsijHex4TWZXi2HwKVsjPiltzlhse2znVcm9Ace510VT1kxIHjGJCZZQBX2gJDbo0g==
+
 "@babel/highlight@^7.10.4", "@babel/highlight@^7.12.13":
   version "7.13.10"
   resolved "https://registry.yarnpkg.com/@babel/highlight/-/highlight-7.13.10.tgz#a8b2a66148f5b27d666b15d81774347a731d52d1"
@@ -82,6 +92,13 @@
   resolved "https://registry.yarnpkg.com/@babel/parser/-/parser-7.13.16.tgz#0f18179b0448e6939b1f3f5c4c355a3a9bcdfd37"
   integrity sha512-6bAg36mCwuqLO0hbR+z7PHuqWiCeP7Dzg73OpQwsAB1Eb8HnGEz5xYBzCfbu+YjoaJsJs+qheDxVAuqbt3ILEw==
 
+"@babel/plugin-syntax-jsx@7.14.5":
+  version "7.14.5"
+  resolved "https://registry.yarnpkg.com/@babel/plugin-syntax-jsx/-/plugin-syntax-jsx-7.14.5.tgz#000e2e25d8673cce49300517a3eda44c263e4201"
+  integrity sha512-ohuFIsOMXJnbOMRfX7/w7LocdR6R7whhuRD4ax8IipLcLPlZGJKkBxgHp++U4N/vKyU16/YDQr2f5seajD3jIw==
+  dependencies:
+    "@babel/helper-plugin-utils" "^7.14.5"
+
 "@babel/runtime-corejs3@^7.10.2":
   version "7.13.17"
   resolved "https://registry.yarnpkg.com/@babel/runtime-corejs3/-/runtime-corejs3-7.13.17.tgz#9baf45f03d4d013f021760b992d6349a9d27deaf"
@@ -97,6 +114,13 @@
   dependencies:
     regenerator-runtime "^0.13.4"
 
+"@babel/runtime@7.15.3":
+  version "7.15.3"
+  resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.15.3.tgz#2e1c2880ca118e5b2f9988322bd8a7656a32502b"
+  integrity sha512-OvwMLqNXkCXSz1kSm58sEsNuhqOx/fKpnUnKnFB5v8uDda5bLNEHNgKPvhDN6IU0LDcnHQ90LlJ0Q6jnyBSIBA==
+  dependencies:
+    regenerator-runtime "^0.13.4"
+
 "@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2":
   version "7.13.17"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.13.17.tgz#8966d1fc9593bf848602f0662d6b4d0069e3a7ec"
@@ -134,6 +158,14 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/types@7.15.0":
+  version "7.15.0"
+  resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.15.0.tgz#61af11f2286c4e9c69ca8deb5f4375a73c72dcbd"
+  integrity sha512-OBvfqnllOIdX4ojTHpwZbpvz4j3EWyjkZEdmjH0/cgsd6QOdSgU8rLSk6ard/pcW7rlmjdVSX/AWOaORR1uNOQ==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.14.9"
+    to-fast-properties "^2.0.0"
+
 "@babel/types@7.8.3":
   version "7.8.3"
   resolved "https://registry.yarnpkg.com/@babel/types/-/types-7.8.3.tgz#5a383dffa5416db1b73dedffd311ffd0788fb31c"
@@ -206,11 +238,21 @@
   resolved "https://registry.yarnpkg.com/@hapi/hoek/-/hoek-9.1.1.tgz#9daf5745156fd84b8e9889a2dc721f0c58e894aa"
   integrity sha512-CAEbWH7OIur6jEOzaai83jq3FmKmv4PmX1JYfs9IrYcGEVI/lyL1EXJGCj7eFVJ0bg5QR8LMxBlEtA+xKiLpFw==
 
+"@napi-rs/triples@^1.0.3":
+  version "1.0.3"
+  resolved "https://registry.yarnpkg.com/@napi-rs/triples/-/triples-1.0.3.tgz#76d6d0c3f4d16013c61e45dfca5ff1e6c31ae53c"
+  integrity sha512-jDJTpta+P4p1NZTFVLHJ/TLFVYVcOqv6l8xwOeBKNPMgY/zDYH/YH7SJbvrr/h1RcS9GzbPcLKGzpuK9cV56UA==
+
 "@next/env@11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@next/env/-/env-11.0.0.tgz#bdd306a45e88ba3e4e7a36aa91806f6486bb61d0"
   integrity sha512-VKpmDvTYeCpEQjREg3J4pCmVs/QjEzoLmkM8shGFK6e9AmFd0G9QXOL8HGA8qKhy/XmNb7dHeMqrcMiBua4OgA==
 
+"@next/env@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/env/-/env-11.1.2.tgz#27996efbbc54c5f949f5e8c0a156e3aa48369b99"
+  integrity sha512-+fteyVdQ7C/OoulfcF6vd1Yk0FEli4453gr8kSFbU8sKseNSizYq6df5MKz/AjwLptsxrUeIkgBdAzbziyJ3mA==
+
 "@next/eslint-plugin-next@11.0.1":
   version "11.0.1"
   resolved "https://registry.yarnpkg.com/@next/eslint-plugin-next/-/eslint-plugin-next-11.0.1.tgz#5dd3264a40fadcf28eba00d914d69103422bb7e6"
@@ -221,6 +263,11 @@
   resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-11.0.0.tgz#cb2f46b323bbe7f8a337ccd80fb82314d4039403"
   integrity sha512-gydtFzRqsT549U8+sY8382I/f4HFcelD8gdUGnAofQJa/jEU1jkxmjCHC8tmEiyeMLidl7iDZgchfSCpmMzzUg==
 
+"@next/polyfill-module@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/polyfill-module/-/polyfill-module-11.1.2.tgz#1fe92c364fdc81add775a16c678f5057c6aace98"
+  integrity sha512-xZmixqADM3xxtqBV0TpAwSFzWJP0MOQzRfzItHXf1LdQHWb0yofHHC+7eOrPFic8+ZGz5y7BdPkkgR1S25OymA==
+
 "@next/react-dev-overlay@11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-11.0.0.tgz#6befb4d00d952551db1b3909023074eb5778ac5d"
@@ -238,11 +285,60 @@
     stacktrace-parser "0.1.10"
     strip-ansi "6.0.0"
 
+"@next/react-dev-overlay@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/react-dev-overlay/-/react-dev-overlay-11.1.2.tgz#73795dc5454b7af168bac93df7099965ebb603be"
+  integrity sha512-rDF/mGY2NC69mMg2vDqzVpCOlWqnwPUXB2zkARhvknUHyS6QJphPYv9ozoPJuoT/QBs49JJd9KWaAzVBvq920A==
+  dependencies:
+    "@babel/code-frame" "7.12.11"
+    anser "1.4.9"
+    chalk "4.0.0"
+    classnames "2.2.6"
+    css.escape "1.5.1"
+    data-uri-to-buffer "3.0.1"
+    platform "1.3.6"
+    shell-quote "1.7.2"
+    source-map "0.8.0-beta.0"
+    stacktrace-parser "0.1.10"
+    strip-ansi "6.0.0"
+
 "@next/react-refresh-utils@11.0.0":
   version "11.0.0"
   resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-11.0.0.tgz#cb671723c50b904eaa44b4b45c0845476ecd8825"
   integrity sha512-hi5eY+KBn4QGtUv7VL2OptdM33fI2hxhd7+omOFmAK+S0hDWhg1uqHqqGJk0W1IfqlWEzzL10WvTJDPRAtDugQ==
 
+"@next/react-refresh-utils@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/react-refresh-utils/-/react-refresh-utils-11.1.2.tgz#44ea40d8e773e4b77bad85e24f6ac041d5e4b4a5"
+  integrity sha512-hsoJmPfhVqjZ8w4IFzoo8SyECVnN+8WMnImTbTKrRUHOVJcYMmKLL7xf7T0ft00tWwAl/3f3Q3poWIN2Ueql/Q==
+
+"@next/swc-darwin-arm64@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-arm64/-/swc-darwin-arm64-11.1.2.tgz#93226c38db488c4b62b30a53b530e87c969b8251"
+  integrity sha512-hZuwOlGOwBZADA8EyDYyjx3+4JGIGjSHDHWrmpI7g5rFmQNltjlbaefAbiU5Kk7j3BUSDwt30quJRFv3nyJQ0w==
+
+"@next/swc-darwin-x64@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-darwin-x64/-/swc-darwin-x64-11.1.2.tgz#792003989f560c00677b5daeff360b35b510db83"
+  integrity sha512-PGOp0E1GisU+EJJlsmJVGE+aPYD0Uh7zqgsrpD3F/Y3766Ptfbe1lEPPWnRDl+OzSSrSrX1lkyM/Jlmh5OwNvA==
+
+"@next/swc-linux-x64-gnu@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-linux-x64-gnu/-/swc-linux-x64-gnu-11.1.2.tgz#8216b2ae1f21f0112958735c39dd861088108f37"
+  integrity sha512-YcDHTJjn/8RqvyJVB6pvEKXihDcdrOwga3GfMv/QtVeLphTouY4BIcEUfrG5+26Nf37MP1ywN3RRl1TxpurAsQ==
+
+"@next/swc-win32-x64-msvc@11.1.2":
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/@next/swc-win32-x64-msvc/-/swc-win32-x64-msvc-11.1.2.tgz#e15824405df137129918205e43cb5e9339589745"
+  integrity sha512-e/pIKVdB+tGQYa1cW3sAeHm8gzEri/HYLZHT4WZojrUxgWXqx8pk7S7Xs47uBcFTqBDRvK3EcQpPLf3XdVsDdg==
+
+"@node-rs/helper@1.2.1":
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/@node-rs/helper/-/helper-1.2.1.tgz#e079b05f21ff4329d82c4e1f71c0290e4ecdc70c"
+  integrity sha512-R5wEmm8nbuQU0YGGmYVjEc0OHtYsuXdpRG+Ut/3wZ9XAvQWyThN08bTh2cBJgoZxHQUPtvRfeQuxcAgLuiBISg==
+  dependencies:
+    "@napi-rs/triples" "^1.0.3"
+
 "@nodelib/fs.scandir@2.1.5":
   version "2.1.5"
   resolved "https://registry.yarnpkg.com/@nodelib/fs.scandir/-/fs.scandir-2.1.5.tgz#7619c2eb21b25483f6d167548b4cfd5a7488c3d5"
@@ -968,6 +1064,13 @@ cssnano-preset-simple@^2.0.0:
   dependencies:
     caniuse-lite "^1.0.30001202"
 
+cssnano-preset-simple@^3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-preset-simple/-/cssnano-preset-simple-3.0.0.tgz#e95d0012699ca2c741306e9a3b8eeb495a348dbe"
+  integrity sha512-vxQPeoMRqUT3c/9f0vWeVa2nKQIHFpogtoBvFdW4GQ3IvEJ6uauCP6p3Y5zQDLFcI7/+40FTgX12o7XUL0Ko+w==
+  dependencies:
+    caniuse-lite "^1.0.30001202"
+
 cssnano-simple@2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-2.0.0.tgz#930d9dcd8ba105c5a62ce719cb00854da58b5c05"
@@ -975,6 +1078,13 @@ cssnano-simple@2.0.0:
   dependencies:
     cssnano-preset-simple "^2.0.0"
 
+cssnano-simple@3.0.0:
+  version "3.0.0"
+  resolved "https://registry.yarnpkg.com/cssnano-simple/-/cssnano-simple-3.0.0.tgz#a4b8ccdef4c7084af97e19bc5b93b4ecf211e90f"
+  integrity sha512-oU3ueli5Dtwgh0DyeohcIEE00QVfbPR3HzyXdAl89SfnQG3y0/qcpfLVW+jPIh3/rgMZGwuW96rejZGaYE9eUg==
+  dependencies:
+    cssnano-preset-simple "^3.0.0"
+
 csso@^4.2.0:
   version "4.2.0"
   resolved "https://registry.yarnpkg.com/csso/-/csso-4.2.0.tgz#ea3a561346e8dc9f546d6febedd50187cf389529"
@@ -2388,6 +2498,67 @@ next@^11.0.0:
     vm-browserify "1.1.2"
     watchpack "2.1.1"
 
+next@^11.1.2:
+  version "11.1.2"
+  resolved "https://registry.yarnpkg.com/next/-/next-11.1.2.tgz#527475787a9a362f1bc916962b0c0655cc05bc91"
+  integrity sha512-azEYL0L+wFjv8lstLru3bgvrzPvK0P7/bz6B/4EJ9sYkXeW8r5Bjh78D/Ol7VOg0EIPz0CXoe72hzAlSAXo9hw==
+  dependencies:
+    "@babel/runtime" "7.15.3"
+    "@hapi/accept" "5.0.2"
+    "@next/env" "11.1.2"
+    "@next/polyfill-module" "11.1.2"
+    "@next/react-dev-overlay" "11.1.2"
+    "@next/react-refresh-utils" "11.1.2"
+    "@node-rs/helper" "1.2.1"
+    assert "2.0.0"
+    ast-types "0.13.2"
+    browserify-zlib "0.2.0"
+    browserslist "4.16.6"
+    buffer "5.6.0"
+    caniuse-lite "^1.0.30001228"
+    chalk "2.4.2"
+    chokidar "3.5.1"
+    constants-browserify "1.0.0"
+    crypto-browserify "3.12.0"
+    cssnano-simple "3.0.0"
+    domain-browser "4.19.0"
+    encoding "0.1.13"
+    etag "1.8.1"
+    find-cache-dir "3.3.1"
+    get-orientation "1.1.2"
+    https-browserify "1.0.0"
+    image-size "1.0.0"
+    jest-worker "27.0.0-next.5"
+    native-url "0.3.4"
+    node-fetch "2.6.1"
+    node-html-parser "1.4.9"
+    node-libs-browser "^2.2.1"
+    os-browserify "0.3.0"
+    p-limit "3.1.0"
+    path-browserify "1.0.1"
+    pnp-webpack-plugin "1.6.4"
+    postcss "8.2.15"
+    process "0.11.10"
+    querystring-es3 "0.2.1"
+    raw-body "2.4.1"
+    react-is "17.0.2"
+    react-refresh "0.8.3"
+    stream-browserify "3.0.0"
+    stream-http "3.1.1"
+    string_decoder "1.3.0"
+    styled-jsx "4.0.1"
+    timers-browserify "2.0.12"
+    tty-browserify "0.0.1"
+    use-subscription "1.5.1"
+    util "0.12.4"
+    vm-browserify "1.1.2"
+    watchpack "2.1.1"
+  optionalDependencies:
+    "@next/swc-darwin-arm64" "11.1.2"
+    "@next/swc-darwin-x64" "11.1.2"
+    "@next/swc-linux-x64-gnu" "11.1.2"
+    "@next/swc-win32-x64-msvc" "11.1.2"
+
 no-scroll@^2.1.1:
   version "2.1.1"
   resolved "https://registry.yarnpkg.com/no-scroll/-/no-scroll-2.1.1.tgz#f37e08cb159b75a5bdbfc0a87cd9223e120e6e27"
@@ -2773,6 +2944,15 @@ postcss@8.2.13:
     nanoid "^3.1.22"
     source-map "^0.6.1"
 
+postcss@8.2.15:
+  version "8.2.15"
+  resolved "https://registry.yarnpkg.com/postcss/-/postcss-8.2.15.tgz#9e66ccf07292817d226fc315cbbf9bc148fbca65"
+  integrity sha512-2zO3b26eJD/8rb106Qu2o7Qgg52ND5HPjcyQiK2B98O388h43A448LCslC0dI2P97wCAQRJsFvwTRcXxTKds+Q==
+  dependencies:
+    colorette "^1.2.2"
+    nanoid "^3.1.23"
+    source-map "^0.6.1"
+
 prelude-ls@^1.2.1:
   version "1.2.1"
   resolved "https://registry.yarnpkg.com/prelude-ls/-/prelude-ls-1.2.1.tgz#debc6489d7a6e6b0e7611888cec880337d316396"
@@ -3368,6 +3548,20 @@ styled-jsx@3.3.2:
     stylis "3.5.4"
     stylis-rule-sheet "0.0.10"
 
+styled-jsx@4.0.1:
+  version "4.0.1"
+  resolved "https://registry.yarnpkg.com/styled-jsx/-/styled-jsx-4.0.1.tgz#ae3f716eacc0792f7050389de88add6d5245b9e9"
+  integrity sha512-Gcb49/dRB1k8B4hdK8vhW27Rlb2zujCk1fISrizCcToIs+55B4vmUM0N9Gi4nnVfFZWe55jRdWpAqH1ldAKWvQ==
+  dependencies:
+    "@babel/plugin-syntax-jsx" "7.14.5"
+    "@babel/types" "7.15.0"
+    convert-source-map "1.7.0"
+    loader-utils "1.2.3"
+    source-map "0.7.3"
+    string-hash "1.1.3"
+    stylis "3.5.4"
+    stylis-rule-sheet "0.0.10"
+
 stylis-rule-sheet@0.0.10:
   version "0.0.10"
   resolved "https://registry.yarnpkg.com/stylis-rule-sheet/-/stylis-rule-sheet-0.0.10.tgz#44e64a2b076643f4b52e5ff71efc04d8c3c4a430"
@@ -3598,6 +3792,18 @@ util@0.12.3, util@^0.12.0:
     safe-buffer "^5.1.2"
     which-typed-array "^1.1.2"
 
+util@0.12.4:
+  version "0.12.4"
+  resolved "https://registry.yarnpkg.com/util/-/util-0.12.4.tgz#66121a31420df8f01ca0c464be15dfa1d1850253"
+  integrity sha512-bxZ9qtSlGUWSOy9Qa9Xgk11kSslpuZwaxCg4sNIDj6FLucDab2JxnHwyNTCpHMtK1MjoQiWQ6DiUMZYbSrO+Sw==
+  dependencies:
+    inherits "^2.0.3"
+    is-arguments "^1.0.4"
+    is-generator-function "^1.0.7"
+    is-typed-array "^1.1.3"
+    safe-buffer "^5.1.2"
+    which-typed-array "^1.1.2"
+
 util@^0.11.0:
   version "0.11.1"
   resolved "https://registry.yarnpkg.com/util/-/util-0.11.1.tgz#3236733720ec64bb27f6e26f421aaa2e1b588d61"