renamed daily-js to custom
|
|
@ -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,7 +18,7 @@ Please note: these demos are intended as educational resources for using the Dai
|
|||
|
||||
## Contents
|
||||
|
||||
## [Daily JS (Web)](./dailyjs/)
|
||||
## [Daily JS (Web)](./custom/)
|
||||
|
||||
Examples that showcase the Daily CallObject using our Javascript library
|
||||
|
||||
|
|
|
|||
|
|
@ -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
|
||||
|
|
@ -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?
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
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 '../Call/Room';
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
import { PeopleAside } from '@dailyjs/shared/components/Aside/PeopleAside';
|
||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
||||
import { PeopleAside } from '@custom/shared/components/Aside/PeopleAside';
|
||||
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||
|
||||
export const Asides = () => {
|
||||
const { asides } = useUIState();
|
||||
|
|
@ -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();
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
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';
|
||||
|
||||
|
|
@ -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();
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import VideoContainer from '@dailyjs/shared/components/VideoContainer/VideoContainer';
|
||||
import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
|
||||
|
||||
import { Container } from './Container';
|
||||
import { Header } from './Header';
|
||||
|
|
@ -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';
|
||||
|
||||
/**
|
||||
|
|
@ -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();
|
||||
|
|
@ -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 }) => {
|
||||
|
|
@ -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';
|
||||
|
||||
/**
|
||||
|
|
@ -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 = () => (
|
||||
<Card>
|
||||
|
Before Width: | Height: | Size: 1.1 MiB After Width: | Height: | Size: 1.1 MiB |
|
|
@ -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');
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@dailyjs/basic-call",
|
||||
"name": "@custom/basic-call",
|
||||
"description": "Basic Call Example",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dailyjs/shared": "*",
|
||||
"@custom/shared": "*",
|
||||
"next": "^11.1.2",
|
||||
"pluralize": "^8.0.0"
|
||||
},
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import GlobalStyle from '@dailyjs/shared/components/GlobalStyle';
|
||||
import GlobalStyle from '@custom/shared/components/GlobalStyle';
|
||||
import Head from 'next/head';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
|
|
@ -1,11 +1,11 @@
|
|||
import React, { useState, useCallback } from 'react';
|
||||
import { CallProvider } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { MediaDeviceProvider } from '@dailyjs/shared/contexts/MediaDeviceProvider';
|
||||
import { ParticipantsProvider } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
||||
import { TracksProvider } from '@dailyjs/shared/contexts/TracksProvider';
|
||||
import { UIStateProvider } from '@dailyjs/shared/contexts/UIStateProvider';
|
||||
import { WaitingRoomProvider } from '@dailyjs/shared/contexts/WaitingRoomProvider';
|
||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
||||
import { CallProvider } from '@custom/shared/contexts/CallProvider';
|
||||
import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
|
||||
import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
|
||||
import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
|
||||
import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
|
||||
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||
import PropTypes from 'prop-types';
|
||||
import App from '../components/App';
|
||||
import CreatingRoom from '../components/Prejoin/CreatingRoom';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import MessageCard from '@dailyjs/shared/components/MessageCard';
|
||||
import MessageCard from '@custom/shared/components/MessageCard';
|
||||
|
||||
export default function RoomNotFound() {
|
||||
return (
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
### Live example
|
||||
|
||||
**[See it in action here ➡️](https://dailyjs-flying-emojis.vercel.app)**
|
||||
**[See it in action here ➡️](https://custom-flying-emojis.vercel.app)**
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -23,7 +23,7 @@ Please note: this demo is not currently mobile optimised
|
|||
mv env.example .env.local
|
||||
|
||||
yarn
|
||||
yarn workspace @dailyjs/flying-emojis dev
|
||||
yarn workspace @custom/flying-emojis dev
|
||||
```
|
||||
|
||||
## Deploy your own on Vercel
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import App from '@dailyjs/basic-call/components/App';
|
||||
import App from '@custom/basic-call/components/App';
|
||||
import FlyingEmojiOverlay from '../FlyingEmojis/FlyingEmojisOverlay';
|
||||
|
||||
export const AppWithEmojis = () => (
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React, { useEffect, useRef, useCallback } from 'react';
|
||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
|
||||
const EMOJI_MAP = {
|
||||
fire: '🔥',
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React, { useEffect, useState } from 'react';
|
||||
|
||||
import Button from '@dailyjs/shared/components/Button';
|
||||
import { TrayButton } from '@dailyjs/shared/components/Tray';
|
||||
import { ReactComponent as IconStar } from '@dailyjs/shared/icons/star-md.svg';
|
||||
import Button from '@custom/shared/components/Button';
|
||||
import { TrayButton } from '@custom/shared/components/Tray';
|
||||
import { ReactComponent as IconStar } from '@custom/shared/icons/star-md.svg';
|
||||
|
||||
const COOLDOWN = 1500;
|
||||
|
||||
|
Before Width: | Height: | Size: 143 KiB After Width: | Height: | Size: 143 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
const withPlugins = require('next-compose-plugins');
|
||||
const withTM = require('next-transpile-modules')([
|
||||
'@dailyjs/shared',
|
||||
'@dailyjs/basic-call',
|
||||
'@custom/shared',
|
||||
'@custom/basic-call',
|
||||
]);
|
||||
|
||||
const packageJson = require('./package.json');
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@dailyjs/flying-emojis",
|
||||
"name": "@custom/flying-emojis",
|
||||
"description": "Basic Call + Flying Emojis",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dailyjs/basic-call": "*",
|
||||
"@dailyjs/shared": "*",
|
||||
"@custom/basic-call": "*",
|
||||
"@custom/shared": "*",
|
||||
"next": "^11.0.0",
|
||||
"pluralize": "^8.0.0",
|
||||
"react": "^17.0.2",
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import App from '@dailyjs/basic-call/pages/_app';
|
||||
import App from '@custom/basic-call/pages/_app';
|
||||
import AppWithEmojis from '../components/App';
|
||||
import Tray from '../components/Tray';
|
||||
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import Index from '@dailyjs/basic-call/pages';
|
||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
||||
import Index from '@custom/basic-call/pages';
|
||||
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||
|
||||
export async function getStaticProps() {
|
||||
const defaultProps = getDemoProps();
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import App from '@dailyjs/basic-call/components/App';
|
||||
import App from '@custom/basic-call/components/App';
|
||||
import { RecordingProvider } from '../../contexts/RecordingProvider';
|
||||
|
||||
// Extend our basic call app component with the recording context
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
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 { TrayButton } from '@custom/shared/components/Tray';
|
||||
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||
import { ReactComponent as IconRecord } from '@custom/shared/icons/record-md.svg';
|
||||
|
||||
import {
|
||||
RECORDING_ERROR,
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
const withPlugins = require('next-compose-plugins');
|
||||
const withTM = require('next-transpile-modules')([
|
||||
'@dailyjs/shared',
|
||||
'@dailyjs/basic-call',
|
||||
'@custom/shared',
|
||||
'@custom/basic-call',
|
||||
]);
|
||||
|
||||
const packageJson = require('./package.json');
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@dailyjs/live-fitness",
|
||||
"name": "@custom/live-fitness",
|
||||
"description": "Live Fitness",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dailyjs/shared": "*",
|
||||
"@dailyjs/basic-call": "*",
|
||||
"@custom/shared": "*",
|
||||
"@custom/basic-call": "*",
|
||||
"next": "^11.0.0",
|
||||
"pluralize": "^8.0.0",
|
||||
"react": "^17.0.2",
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import React from 'react';
|
||||
import App from '@dailyjs/basic-call/pages/_app';
|
||||
import App from '@custom/basic-call/pages/_app';
|
||||
import AppWithRecording from '../components/App';
|
||||
|
||||
import { RecordingModal } from '../components/RecordingModal';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import Index from '@dailyjs/basic-call/pages';
|
||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
||||
import Index from '@custom/basic-call/pages';
|
||||
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||
|
||||
export async function getStaticProps() {
|
||||
const defaultProps = getDemoProps();
|
||||
|
|
@ -4,7 +4,7 @@
|
|||
|
||||
### Live example
|
||||
|
||||
**[See it in action here ➡️](https://dailyjs-pagination.vercel.app)**
|
||||
**[See it in action here ➡️](https://custom-pagination.vercel.app)**
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -22,7 +22,7 @@ Please note: this demo is not currently mobile optimised
|
|||
mv env.example .env.local
|
||||
|
||||
yarn
|
||||
yarn workspace @dailyjs/live-streaming dev
|
||||
yarn workspace @custom/live-streaming dev
|
||||
```
|
||||
|
||||
Note: this example uses an additional env `MANUAL_TRACK_SUBS=1` that will disable [automatic track management](https://docs.daily.co/reference#%EF%B8%8F-setsubscribetotracksautomatically).
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
import React from 'react';
|
||||
|
||||
import App from '@dailyjs/basic-call/components/App';
|
||||
import Room from '@dailyjs/basic-call/components/Room';
|
||||
import App from '@custom/basic-call/components/App';
|
||||
import Room from '@custom/basic-call/components/Room';
|
||||
import PaginatedVideoGrid from '../PaginatedVideoGrid';
|
||||
|
||||
export const AppWithPagination = () => (
|
||||
|
|
@ -5,19 +5,19 @@ import React, {
|
|||
useEffect,
|
||||
useState,
|
||||
} from 'react';
|
||||
import { Button } from '@dailyjs/shared/components/Button';
|
||||
import Tile from '@dailyjs/shared/components/Tile';
|
||||
import { Button } from '@custom/shared/components/Button';
|
||||
import Tile from '@custom/shared/components/Tile';
|
||||
import {
|
||||
DEFAULT_ASPECT_RATIO,
|
||||
MEETING_STATE_JOINED,
|
||||
} from '@dailyjs/shared/constants';
|
||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
||||
import { isLocalId } from '@dailyjs/shared/contexts/participantsState';
|
||||
import { useActiveSpeaker } from '@dailyjs/shared/hooks/useActiveSpeaker';
|
||||
import { useCamSubscriptions } from '@dailyjs/shared/hooks/useCamSubscriptions';
|
||||
import { ReactComponent as IconArrow } from '@dailyjs/shared/icons/raquo-md.svg';
|
||||
import sortByKey from '@dailyjs/shared/lib/sortByKey';
|
||||
} from '@custom/shared/constants';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { isLocalId } from '@custom/shared/contexts/participantsState';
|
||||
import { useActiveSpeaker } from '@custom/shared/hooks/useActiveSpeaker';
|
||||
import { useCamSubscriptions } from '@custom/shared/hooks/useCamSubscriptions';
|
||||
import { ReactComponent as IconArrow } from '@custom/shared/icons/raquo-md.svg';
|
||||
import sortByKey from '@custom/shared/lib/sortByKey';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useDeepCompareMemo } from 'use-deep-compare';
|
||||
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
import React from 'react';
|
||||
|
||||
import { TrayButton } from '@dailyjs/shared/components/Tray';
|
||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { ReactComponent as IconAdd } from '@dailyjs/shared/icons/add-md.svg';
|
||||
import { TrayButton } from '@custom/shared/components/Tray';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
import { ReactComponent as IconAdd } from '@custom/shared/icons/add-md.svg';
|
||||
|
||||
export const Tray = () => {
|
||||
const { callObject } = useCallState();
|
||||
|
Before Width: | Height: | Size: 714 KiB After Width: | Height: | Size: 714 KiB |
|
|
@ -1,7 +1,7 @@
|
|||
const withPlugins = require('next-compose-plugins');
|
||||
const withTM = require('next-transpile-modules')([
|
||||
'@dailyjs/shared',
|
||||
'@dailyjs/basic-call',
|
||||
'@custom/shared',
|
||||
'@custom/basic-call',
|
||||
]);
|
||||
|
||||
const packageJson = require('./package.json');
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
{
|
||||
"name": "@dailyjs/pagination",
|
||||
"name": "@custom/pagination",
|
||||
"description": "Basic Call + Pagination",
|
||||
"version": "0.1.0",
|
||||
"private": true,
|
||||
|
|
@ -10,8 +10,8 @@
|
|||
"lint": "next lint"
|
||||
},
|
||||
"dependencies": {
|
||||
"@dailyjs/shared": "*",
|
||||
"@dailyjs/basic-call": "*",
|
||||
"@custom/shared": "*",
|
||||
"@custom/basic-call": "*",
|
||||
"next": "^11.0.0",
|
||||
"pluralize": "^8.0.0",
|
||||
"react": "^17.0.2",
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import App from '@dailyjs/basic-call/pages/_app';
|
||||
import App from '@custom/basic-call/pages/_app';
|
||||
import AppWithPagination from '../components/App';
|
||||
|
||||
import Tray from '../components/Tray';
|
||||
|
|
@ -1,5 +1,5 @@
|
|||
import Index from '@dailyjs/basic-call/pages';
|
||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
||||
import Index from '@custom/basic-call/pages';
|
||||
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||
|
||||
export async function getStaticProps() {
|
||||
const defaultProps = getDemoProps();
|
||||
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 1.9 KiB After Width: | Height: | Size: 1.9 KiB |
|
Before Width: | Height: | Size: 50 KiB After Width: | Height: | Size: 50 KiB |
|
|
@ -22,7 +22,7 @@ Please note: this demo is not currently mobile optimised
|
|||
mv env.example .env.local
|
||||
|
||||
yarn
|
||||
yarn workspace @dailyjs/recording dev
|
||||
yarn workspace @custom/recording dev
|
||||
```
|
||||
|
||||
### How does this demo work?
|
||||
|
|
@ -1,6 +1,6 @@
|
|||
import React from 'react';
|
||||
|
||||
import App from '@dailyjs/basic-call/components/App';
|
||||
import App from '@custom/basic-call/components/App';
|
||||
import { RecordingProvider } from '../../contexts/RecordingProvider';
|
||||
|
||||
// Extend our basic call app component with the recording context
|
||||
|
|
@ -1,10 +1,10 @@
|
|||
import React, { useEffect } from 'react';
|
||||
import Button from '@dailyjs/shared/components/Button';
|
||||
import { CardBody } from '@dailyjs/shared/components/Card';
|
||||
import Modal from '@dailyjs/shared/components/Modal';
|
||||
import Well from '@dailyjs/shared/components/Well';
|
||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
||||
import Button from '@custom/shared/components/Button';
|
||||
import { CardBody } from '@custom/shared/components/Card';
|
||||
import Modal from '@custom/shared/components/Modal';
|
||||
import Well from '@custom/shared/components/Well';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||
import {
|
||||
RECORDING_COUNTDOWN_1,
|
||||
RECORDING_COUNTDOWN_2,
|
||||
|
|
@ -1,8 +1,8 @@
|
|||
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 { TrayButton } from '@custom/shared/components/Tray';
|
||||
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||
import { ReactComponent as IconRecord } from '@custom/shared/icons/record-md.svg';
|
||||
|
||||
import {
|
||||
RECORDING_ERROR,
|
||||
|
|
@ -6,13 +6,13 @@ import React, {
|
|||
useState,
|
||||
} from 'react';
|
||||
|
||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
||||
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||
import {
|
||||
CALL_STATE_REDIRECTING,
|
||||
CALL_STATE_JOINED,
|
||||
} from '@dailyjs/shared/contexts/useCallMachine';
|
||||
} from '@custom/shared/contexts/useCallMachine';
|
||||
import PropTypes from 'prop-types';
|
||||
import { useDeepCompareEffect } from 'use-deep-compare';
|
||||
|
||||
|
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 281 KiB |