diff --git a/.eslintrc b/.eslintrc
index 51a6ed2..1dca80b 100644
--- a/.eslintrc
+++ b/.eslintrc
@@ -1,18 +1,13 @@
{
- "extends": ["airbnb", "airbnb/hooks", "prettier"],
- "parser": "babel-eslint",
+ "extends": ["next/core-web-vitals", "prettier"],
"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",
{
diff --git a/CONTRIBUTING.md b/CONTRIBUTING.md
index 19027ab..ab80e21 100644
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@@ -14,7 +14,7 @@ Thank you for looking into contributing to`daily-demos`! We want these projects
## Before contributing
-### Run prebuilt-ui locally
+### Run /prebuilt locally
Please follow the instructions in `README.md`.
@@ -35,7 +35,7 @@ _Bug reports_
Before creating a new bug report, please do two things:
1. If you want to report a bug you experienced while on a Daily call, try out these [troubleshooting tips](https://help.daily.co/en/articles/2303117-top-troubleshooting-tips) to see if that takes care of the bug.
-2. If you're still seeing the error, check to see if somebody else has [already filed the issue](https://github.com/daily-co/daily-demos/issues) before creating a new one.
+2. If you're still seeing the error, check to see if somebody else has [already filed the issue](https://github.com/daily-demos/examples/issues) before creating a new one.
If you've done those two things and need to create an issue, we'll ask you to tell us:
diff --git a/README.md b/README.md
index 7651b9b..8b9c557 100644
--- a/README.md
+++ b/README.md
@@ -10,7 +10,7 @@ Setup dependencies via `yarn install`.
Add the required environment variables (e.g. your Daily API key) for the demo being used. Each demo's README will list the required environment variables to run it locally.
-Run an example via `yarn workspace @dailyjs/basic-call dev` (replacing `basic-call` with the name of the demo).
+Run an example via `yarn workspace @custom/basic-call dev` (replacing `basic-call` with the name of the demo).
Please note: these demos are intended as educational resources for using the Daily platform as well as showcasing common usage patterns and best practices. That said, they are not intended to be used as production ready applications.
@@ -18,11 +18,11 @@ Please note: these demos are intended as educational resources for using the Dai
## Contents
-## [Daily JS (Web)](./dailyjs/)
+## [Custom (Web)](./custom/)
-Examples that showcase the Daily CallObject using our Javascript library
+Examples that showcase the Daily call object using our Javascript library
-## [Prebuilt UI](./prebuilt-ui)
+## [Prebuilt UI](./prebuilt)
Examples that showcase using and customizing the Daily Prebuilt UI
diff --git a/dailyjs/.gitignore b/custom/.gitignore
similarity index 100%
rename from dailyjs/.gitignore
rename to custom/.gitignore
diff --git a/dailyjs/README.md b/custom/README.md
similarity index 90%
rename from dailyjs/README.md
rename to custom/README.md
index 81f366e..6b74046 100644
--- a/dailyjs/README.md
+++ b/custom/README.md
@@ -1,4 +1,4 @@
-# Daily JS Examples
+# Custom Examples (Daily JS)
### [🤙 Basic call](./basic-call)
@@ -30,7 +30,7 @@ Demonstrates using manual track management to support larger call sizes
We recommend starting with the [basic call](./basic-call) example, showcasing the common flow of a call Daily call, device management and error handling.
-Run an examples with `yarn workspace @dailyjs/[demo-name] dev` (replacing `[demo-name]` with the name of the demo you'd like to run e.g. `basic-call`.
+Run an examples with `yarn workspace @custom/[demo-name] dev` (replacing `[demo-name]` with the name of the demo you'd like to run e.g. `basic-call`.
- Please ensure your Daily rooms are setup to use [web sockets](https://docs.daily.co/reference#domain-configuration)
- Follow the instructions within each demo first, making sure to set all the necassary local environment variables etc
diff --git a/dailyjs/basic-call/.babelrc b/custom/basic-call/.babelrc
similarity index 100%
rename from dailyjs/basic-call/.babelrc
rename to custom/basic-call/.babelrc
diff --git a/dailyjs/basic-call/.gitignore b/custom/basic-call/.gitignore
similarity index 100%
rename from dailyjs/basic-call/.gitignore
rename to custom/basic-call/.gitignore
diff --git a/dailyjs/basic-call/README.md b/custom/basic-call/README.md
similarity index 90%
rename from dailyjs/basic-call/README.md
rename to custom/basic-call/README.md
index 3fde13d..648f221 100644
--- a/dailyjs/basic-call/README.md
+++ b/custom/basic-call/README.md
@@ -4,7 +4,7 @@
### Live example
-**[See it in action here ➡️](https://dailyjs-basic-call.vercel.app)**
+**[See it in action here ➡️](https://custom-basic-call.vercel.app)**
---
@@ -28,7 +28,7 @@ mv env.example .env.local
# from project root...
yarn
-yarn workspace @dailyjs/basic-call dev
+yarn workspace @custom/basic-call dev
```
## How does this example work?
@@ -47,7 +47,7 @@ Primary call context that manages Daily call state, participant state and call o
**[useCallMachine.js](../shared/contexts/useCallMachine.js)**
Abstraction hook that manages Daily call state and error handling
-**[ParticipantProvider.js](../shared/contexts/ParticipantProvider.js)**
+**[ParticipantsProvider.js](../shared/contexts/ParticipantsProvider.js)**
Manages participant state and abstracts common selectors / derived data
## Deploy your own on Vercel
diff --git a/dailyjs/basic-call/components/App/App.js b/custom/basic-call/components/App/App.js
similarity index 80%
rename from dailyjs/basic-call/components/App/App.js
rename to custom/basic-call/components/App/App.js
index fa7c678..81b43d9 100644
--- a/dailyjs/basic-call/components/App/App.js
+++ b/custom/basic-call/components/App/App.js
@@ -1,10 +1,10 @@
import React, { useMemo } from 'react';
-import ExpiryTimer from '@dailyjs/shared/components/ExpiryTimer';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useCallUI } from '@dailyjs/shared/hooks/useCallUI';
+import ExpiryTimer from '@custom/shared/components/ExpiryTimer';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useCallUI } from '@custom/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';
@@ -13,7 +13,7 @@ export const App = ({ customComponentForState }) => {
const componentForState = useCallUI({
state,
- room: () => ,
+ room: ,
...customComponentForState,
});
diff --git a/dailyjs/basic-call/components/App/Asides.js b/custom/basic-call/components/App/Asides.js
similarity index 55%
rename from dailyjs/basic-call/components/App/Asides.js
rename to custom/basic-call/components/App/Asides.js
index f78b4c8..4afbca0 100644
--- a/dailyjs/basic-call/components/App/Asides.js
+++ b/custom/basic-call/components/App/Asides.js
@@ -1,6 +1,7 @@
import React from 'react';
-import { PeopleAside } from '@dailyjs/shared/components/Aside/PeopleAside';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import { NetworkAside } from '@custom/shared/components/Aside';
+import { PeopleAside } from '@custom/shared/components/Aside';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
export const Asides = () => {
const { asides } = useUIState();
@@ -8,6 +9,7 @@ export const Asides = () => {
return (
<>
+
{asides.map((AsideComponent) => (
))}
diff --git a/dailyjs/basic-call/components/App/Modals.js b/custom/basic-call/components/App/Modals.js
similarity index 62%
rename from dailyjs/basic-call/components/App/Modals.js
rename to custom/basic-call/components/App/Modals.js
index 264ddd7..ba5c27c 100644
--- a/dailyjs/basic-call/components/App/Modals.js
+++ b/custom/basic-call/components/App/Modals.js
@@ -1,6 +1,6 @@
import React from 'react';
-import DeviceSelectModal from '@dailyjs/shared/components/DeviceSelectModal/DeviceSelectModal';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import DeviceSelectModal from '@custom/shared/components/DeviceSelectModal/DeviceSelectModal';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
export const Modals = () => {
const { modals } = useUIState();
diff --git a/dailyjs/basic-call/components/App/index.js b/custom/basic-call/components/App/index.js
similarity index 53%
rename from dailyjs/basic-call/components/App/index.js
rename to custom/basic-call/components/App/index.js
index 8ab4977..7e7372b 100644
--- a/dailyjs/basic-call/components/App/index.js
+++ b/custom/basic-call/components/App/index.js
@@ -1,2 +1 @@
export { App as default } from './App';
-export { Modals } from './Modals';
diff --git a/dailyjs/basic-call/components/Room/RoomContainer.js b/custom/basic-call/components/Call/Container.js
similarity index 64%
rename from dailyjs/basic-call/components/Room/RoomContainer.js
rename to custom/basic-call/components/Call/Container.js
index b3fed79..22e0d08 100644
--- a/dailyjs/basic-call/components/Room/RoomContainer.js
+++ b/custom/basic-call/components/Call/Container.js
@@ -1,12 +1,12 @@
import React, { useMemo } from 'react';
-import { Audio } from '@dailyjs/shared/components/Audio';
-import { BasicTray } from '@dailyjs/shared/components/Tray';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import useJoinSound from '@dailyjs/shared/hooks/useJoinSound';
+import { Audio } from '@custom/shared/components/Audio';
+import { BasicTray } from '@custom/shared/components/Tray';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import useJoinSound from '@custom/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;
diff --git a/dailyjs/basic-call/components/Room/Header.js b/custom/basic-call/components/Call/Header.js
similarity index 69%
rename from dailyjs/basic-call/components/Room/Header.js
rename to custom/basic-call/components/Call/Header.js
index 7491b1e..b158054 100644
--- a/dailyjs/basic-call/components/Room/Header.js
+++ b/custom/basic-call/components/Call/Header.js
@@ -1,7 +1,7 @@
import React, { useMemo } from 'react';
-import HeaderCapsule from '@dailyjs/shared/components/HeaderCapsule';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
+import HeaderCapsule from '@custom/shared/components/HeaderCapsule';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
export const Header = () => {
const { participantCount } = useParticipants();
@@ -10,7 +10,13 @@ export const Header = () => {
return useMemo(
() => (
-
+ Basic call demo
@@ -31,7 +37,8 @@ export const Header = () => {
flex: 0 0 auto;
column-gap: var(--spacing-xxs);
box-sizing: border-box;
- padding: var(--spacing-sm);
+ padding: var(--spacing-sm) var(--spacing-sm) var(--spacing-xxs)
+ var(--spacing-sm);
align-items: center;
width: 100%;
}
diff --git a/custom/basic-call/components/Call/Room.js b/custom/basic-call/components/Call/Room.js
new file mode 100644
index 0000000..aa4cfe6
--- /dev/null
+++ b/custom/basic-call/components/Call/Room.js
@@ -0,0 +1,19 @@
+import React from 'react';
+import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
+
+import { Container } from './Container';
+import { Header } from './Header';
+import { VideoGrid } from './VideoGrid';
+
+export function Room() {
+ return (
+
+
+
+
+
+
+ );
+}
+
+export default Room;
diff --git a/dailyjs/basic-call/components/VideoGrid/VideoGrid.js b/custom/basic-call/components/Call/VideoGrid.js
similarity index 95%
rename from dailyjs/basic-call/components/VideoGrid/VideoGrid.js
rename to custom/basic-call/components/Call/VideoGrid.js
index 7f66798..e71ff6d 100644
--- a/dailyjs/basic-call/components/VideoGrid/VideoGrid.js
+++ b/custom/basic-call/components/Call/VideoGrid.js
@@ -1,7 +1,7 @@
import React, { useState, useMemo, useEffect, useRef } from 'react';
-import Tile from '@dailyjs/shared/components/Tile';
-import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
+import Tile from '@custom/shared/components/Tile';
+import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
import { useDeepCompareMemo } from 'use-deep-compare';
/**
diff --git a/dailyjs/basic-call/components/WaitingRoom/WaitingRoom.js b/custom/basic-call/components/Call/WaitingRoom.js
similarity index 73%
rename from dailyjs/basic-call/components/WaitingRoom/WaitingRoom.js
rename to custom/basic-call/components/Call/WaitingRoom.js
index c4b2605..4266d44 100644
--- a/dailyjs/basic-call/components/WaitingRoom/WaitingRoom.js
+++ b/custom/basic-call/components/Call/WaitingRoom.js
@@ -2,8 +2,8 @@ import React from 'react';
import {
WaitingRoomModal,
WaitingRoomNotification,
-} from '@dailyjs/shared/components/WaitingRoom';
-import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider';
+} from '@custom/shared/components/WaitingRoom';
+import { useWaitingRoom } from '@custom/shared/contexts/WaitingRoomProvider';
export const WaitingRoom = () => {
const { setShowModal, showModal } = useWaitingRoom();
diff --git a/dailyjs/basic-call/components/CreatingRoom/CreatingRoom.js b/custom/basic-call/components/Prejoin/CreatingRoom.js
similarity index 92%
rename from dailyjs/basic-call/components/CreatingRoom/CreatingRoom.js
rename to custom/basic-call/components/Prejoin/CreatingRoom.js
index 4973120..29b779d 100644
--- a/dailyjs/basic-call/components/CreatingRoom/CreatingRoom.js
+++ b/custom/basic-call/components/Prejoin/CreatingRoom.js
@@ -1,7 +1,7 @@
import React, { useState, useEffect } from 'react';
-import { Card, CardHeader, CardBody } from '@dailyjs/shared/components/Card';
-import Loader from '@dailyjs/shared/components/Loader';
-import { Well } from '@dailyjs/shared/components/Well';
+import { Card, CardHeader, CardBody } from '@custom/shared/components/Card';
+import Loader from '@custom/shared/components/Loader';
+import Well from '@custom/shared/components/Well';
import PropTypes from 'prop-types';
export const CreatingRoom = ({ onCreated }) => {
diff --git a/dailyjs/basic-call/components/Intro/Intro.js b/custom/basic-call/components/Prejoin/Intro.js
similarity index 87%
rename from dailyjs/basic-call/components/Intro/Intro.js
rename to custom/basic-call/components/Prejoin/Intro.js
index 2fe43bb..0f0eaf8 100644
--- a/dailyjs/basic-call/components/Intro/Intro.js
+++ b/custom/basic-call/components/Prejoin/Intro.js
@@ -1,14 +1,14 @@
import React, { useEffect, useState } from 'react';
-import { Button } from '@dailyjs/shared/components/Button';
+import Button from '@custom/shared/components/Button';
import {
Card,
CardBody,
CardFooter,
CardHeader,
-} from '@dailyjs/shared/components/Card';
-import Field from '@dailyjs/shared/components/Field';
-import { TextInput, BooleanInput } from '@dailyjs/shared/components/Input';
-import { Well } from '@dailyjs/shared/components/Well';
+} from '@custom/shared/components/Card';
+import Field from '@custom/shared/components/Field';
+import { TextInput, BooleanInput } from '@custom/shared/components/Input';
+import Well from '@custom/shared/components/Well';
import PropTypes from 'prop-types';
/**
diff --git a/dailyjs/basic-call/components/Intro/NotConfigured.js b/custom/basic-call/components/Prejoin/NotConfigured.js
similarity index 92%
rename from dailyjs/basic-call/components/Intro/NotConfigured.js
rename to custom/basic-call/components/Prejoin/NotConfigured.js
index 75a32fd..7c379ed 100644
--- a/dailyjs/basic-call/components/Intro/NotConfigured.js
+++ b/custom/basic-call/components/Prejoin/NotConfigured.js
@@ -1,5 +1,5 @@
import React from 'react';
-import { Card, CardBody, CardHeader } from '@dailyjs/shared/components/Card';
+import { Card, CardBody, CardHeader } from '@custom/shared/components/Card';
export const NotConfigured = () => (
diff --git a/custom/basic-call/env.example b/custom/basic-call/env.example
new file mode 100644
index 0000000..b4eeffe
--- /dev/null
+++ b/custom/basic-call/env.example
@@ -0,0 +1,11 @@
+# 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
+
+# Run in demo mode (will create a demo room for you to try)
+DAILY_DEMO_MODE=0
\ No newline at end of file
diff --git a/dailyjs/basic-call/image.png b/custom/basic-call/image.png
similarity index 100%
rename from dailyjs/basic-call/image.png
rename to custom/basic-call/image.png
diff --git a/dailyjs/basic-call/index.js b/custom/basic-call/index.js
similarity index 100%
rename from dailyjs/basic-call/index.js
rename to custom/basic-call/index.js
diff --git a/dailyjs/basic-call/next.config.js b/custom/basic-call/next.config.js
similarity index 74%
rename from dailyjs/basic-call/next.config.js
rename to custom/basic-call/next.config.js
index d054cbd..81f29cd 100644
--- a/dailyjs/basic-call/next.config.js
+++ b/custom/basic-call/next.config.js
@@ -1,5 +1,5 @@
const withPlugins = require('next-compose-plugins');
-const withTM = require('next-transpile-modules')(['@dailyjs/shared']);
+const withTM = require('next-transpile-modules')(['@custom/shared']);
const packageJson = require('./package.json');
diff --git a/custom/basic-call/package.json b/custom/basic-call/package.json
new file mode 100644
index 0000000..f82188c
--- /dev/null
+++ b/custom/basic-call/package.json
@@ -0,0 +1,22 @@
+{
+ "name": "@custom/basic-call",
+ "description": "Basic Call Example",
+ "version": "0.1.0",
+ "private": true,
+ "scripts": {
+ "dev": "next dev",
+ "build": "next build",
+ "start": "next start",
+ "lint": "next lint"
+ },
+ "dependencies": {
+ "@custom/shared": "*",
+ "next": "^11.1.2",
+ "pluralize": "^8.0.0"
+ },
+ "devDependencies": {
+ "babel-plugin-module-resolver": "^4.1.0",
+ "next-compose-plugins": "^2.2.1",
+ "next-transpile-modules": "^8.0.0"
+ }
+}
diff --git a/dailyjs/basic-call/pages/_app.js b/custom/basic-call/pages/_app.js
similarity index 83%
rename from dailyjs/basic-call/pages/_app.js
rename to custom/basic-call/pages/_app.js
index 790ea7a..d8a7a82 100644
--- a/dailyjs/basic-call/pages/_app.js
+++ b/custom/basic-call/pages/_app.js
@@ -1,6 +1,5 @@
import React from 'react';
-import GlobalHead from '@dailyjs/shared/components/GlobalHead';
-import GlobalStyle from '@dailyjs/shared/components/GlobalStyle';
+import GlobalStyle from '@custom/shared/components/GlobalStyle';
import Head from 'next/head';
import PropTypes from 'prop-types';
@@ -10,7 +9,6 @@ function App({ Component, pageProps }) {
Daily - {process.env.PROJECT_TITLE}
-
+
+
+
+
+
+
+
+
+