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.
|
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.
|
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
|
## Contents
|
||||||
|
|
||||||
## [Daily JS (Web)](./dailyjs/)
|
## [Daily JS (Web)](./custom/)
|
||||||
|
|
||||||
Examples that showcase the Daily CallObject using our Javascript library
|
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.
|
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)
|
- 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
|
- Follow the instructions within each demo first, making sure to set all the necassary local environment variables etc
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
### Live example
|
### 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...
|
# from project root...
|
||||||
yarn
|
yarn
|
||||||
yarn workspace @dailyjs/basic-call dev
|
yarn workspace @custom/basic-call dev
|
||||||
```
|
```
|
||||||
|
|
||||||
## How does this example work?
|
## How does this example work?
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import ExpiryTimer from '@dailyjs/shared/components/ExpiryTimer';
|
import ExpiryTimer from '@custom/shared/components/ExpiryTimer';
|
||||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||||
import { useCallUI } from '@dailyjs/shared/hooks/useCallUI';
|
import { useCallUI } from '@custom/shared/hooks/useCallUI';
|
||||||
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import Room from '../Call/Room';
|
import Room from '../Call/Room';
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { PeopleAside } from '@dailyjs/shared/components/Aside/PeopleAside';
|
import { PeopleAside } from '@custom/shared/components/Aside/PeopleAside';
|
||||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||||
|
|
||||||
export const Asides = () => {
|
export const Asides = () => {
|
||||||
const { asides } = useUIState();
|
const { asides } = useUIState();
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import DeviceSelectModal from '@dailyjs/shared/components/DeviceSelectModal/DeviceSelectModal';
|
import DeviceSelectModal from '@custom/shared/components/DeviceSelectModal/DeviceSelectModal';
|
||||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||||
|
|
||||||
export const Modals = () => {
|
export const Modals = () => {
|
||||||
const { modals } = useUIState();
|
const { modals } = useUIState();
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import { Audio } from '@dailyjs/shared/components/Audio';
|
import { Audio } from '@custom/shared/components/Audio';
|
||||||
import { BasicTray } from '@dailyjs/shared/components/Tray';
|
import { BasicTray } from '@custom/shared/components/Tray';
|
||||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||||
import useJoinSound from '@dailyjs/shared/hooks/useJoinSound';
|
import useJoinSound from '@custom/shared/hooks/useJoinSound';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { WaitingRoom } from './WaitingRoom';
|
import { WaitingRoom } from './WaitingRoom';
|
||||||
|
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useMemo } from 'react';
|
import React, { useMemo } from 'react';
|
||||||
import HeaderCapsule from '@dailyjs/shared/components/HeaderCapsule';
|
import HeaderCapsule from '@custom/shared/components/HeaderCapsule';
|
||||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||||
|
|
||||||
export const Header = () => {
|
export const Header = () => {
|
||||||
const { participantCount } = useParticipants();
|
const { participantCount } = useParticipants();
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
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 { Container } from './Container';
|
||||||
import { Header } from './Header';
|
import { Header } from './Header';
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useState, useMemo, useEffect, useRef } from 'react';
|
import React, { useState, useMemo, useEffect, useRef } from 'react';
|
||||||
import Tile from '@dailyjs/shared/components/Tile';
|
import Tile from '@custom/shared/components/Tile';
|
||||||
import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
|
import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
|
||||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||||
import { useDeepCompareMemo } from 'use-deep-compare';
|
import { useDeepCompareMemo } from 'use-deep-compare';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -2,8 +2,8 @@ import React from 'react';
|
||||||
import {
|
import {
|
||||||
WaitingRoomModal,
|
WaitingRoomModal,
|
||||||
WaitingRoomNotification,
|
WaitingRoomNotification,
|
||||||
} from '@dailyjs/shared/components/WaitingRoom';
|
} from '@custom/shared/components/WaitingRoom';
|
||||||
import { useWaitingRoom } from '@dailyjs/shared/contexts/WaitingRoomProvider';
|
import { useWaitingRoom } from '@custom/shared/contexts/WaitingRoomProvider';
|
||||||
|
|
||||||
export const WaitingRoom = () => {
|
export const WaitingRoom = () => {
|
||||||
const { setShowModal, showModal } = useWaitingRoom();
|
const { setShowModal, showModal } = useWaitingRoom();
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
import React, { useState, useEffect } from 'react';
|
import React, { useState, useEffect } from 'react';
|
||||||
import { Card, CardHeader, CardBody } from '@dailyjs/shared/components/Card';
|
import { Card, CardHeader, CardBody } from '@custom/shared/components/Card';
|
||||||
import Loader from '@dailyjs/shared/components/Loader';
|
import Loader from '@custom/shared/components/Loader';
|
||||||
import { Well } from '@dailyjs/shared/components/Well';
|
import { Well } from '@custom/shared/components/Well';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
export const CreatingRoom = ({ onCreated }) => {
|
export const CreatingRoom = ({ onCreated }) => {
|
||||||
|
|
@ -1,14 +1,14 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
import Button from '@dailyjs/shared/components/Button';
|
import Button from '@custom/shared/components/Button';
|
||||||
import {
|
import {
|
||||||
Card,
|
Card,
|
||||||
CardBody,
|
CardBody,
|
||||||
CardFooter,
|
CardFooter,
|
||||||
CardHeader,
|
CardHeader,
|
||||||
} from '@dailyjs/shared/components/Card';
|
} from '@custom/shared/components/Card';
|
||||||
import Field from '@dailyjs/shared/components/Field';
|
import Field from '@custom/shared/components/Field';
|
||||||
import { TextInput, BooleanInput } from '@dailyjs/shared/components/Input';
|
import { TextInput, BooleanInput } from '@custom/shared/components/Input';
|
||||||
import Well from '@dailyjs/shared/components/Well';
|
import Well from '@custom/shared/components/Well';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
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 = () => (
|
export const NotConfigured = () => (
|
||||||
<Card>
|
<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 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');
|
const packageJson = require('./package.json');
|
||||||
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "@dailyjs/basic-call",
|
"name": "@custom/basic-call",
|
||||||
"description": "Basic Call Example",
|
"description": "Basic Call Example",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|
@ -10,7 +10,7 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dailyjs/shared": "*",
|
"@custom/shared": "*",
|
||||||
"next": "^11.1.2",
|
"next": "^11.1.2",
|
||||||
"pluralize": "^8.0.0"
|
"pluralize": "^8.0.0"
|
||||||
},
|
},
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import GlobalStyle from '@dailyjs/shared/components/GlobalStyle';
|
import GlobalStyle from '@custom/shared/components/GlobalStyle';
|
||||||
import Head from 'next/head';
|
import Head from 'next/head';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
|
|
||||||
|
|
@ -1,11 +1,11 @@
|
||||||
import React, { useState, useCallback } from 'react';
|
import React, { useState, useCallback } from 'react';
|
||||||
import { CallProvider } from '@dailyjs/shared/contexts/CallProvider';
|
import { CallProvider } from '@custom/shared/contexts/CallProvider';
|
||||||
import { MediaDeviceProvider } from '@dailyjs/shared/contexts/MediaDeviceProvider';
|
import { MediaDeviceProvider } from '@custom/shared/contexts/MediaDeviceProvider';
|
||||||
import { ParticipantsProvider } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
import { ParticipantsProvider } from '@custom/shared/contexts/ParticipantsProvider';
|
||||||
import { TracksProvider } from '@dailyjs/shared/contexts/TracksProvider';
|
import { TracksProvider } from '@custom/shared/contexts/TracksProvider';
|
||||||
import { UIStateProvider } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { UIStateProvider } from '@custom/shared/contexts/UIStateProvider';
|
||||||
import { WaitingRoomProvider } from '@dailyjs/shared/contexts/WaitingRoomProvider';
|
import { WaitingRoomProvider } from '@custom/shared/contexts/WaitingRoomProvider';
|
||||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import App from '../components/App';
|
import App from '../components/App';
|
||||||
import CreatingRoom from '../components/Prejoin/CreatingRoom';
|
import CreatingRoom from '../components/Prejoin/CreatingRoom';
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import MessageCard from '@dailyjs/shared/components/MessageCard';
|
import MessageCard from '@custom/shared/components/MessageCard';
|
||||||
|
|
||||||
export default function RoomNotFound() {
|
export default function RoomNotFound() {
|
||||||
return (
|
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
|
### 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
|
mv env.example .env.local
|
||||||
|
|
||||||
yarn
|
yarn
|
||||||
yarn workspace @dailyjs/flying-emojis dev
|
yarn workspace @custom/flying-emojis dev
|
||||||
```
|
```
|
||||||
|
|
||||||
## Deploy your own on Vercel
|
## Deploy your own on Vercel
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
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';
|
import FlyingEmojiOverlay from '../FlyingEmojis/FlyingEmojisOverlay';
|
||||||
|
|
||||||
export const AppWithEmojis = () => (
|
export const AppWithEmojis = () => (
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React, { useEffect, useRef, useCallback } from 'react';
|
import React, { useEffect, useRef, useCallback } from 'react';
|
||||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||||
|
|
||||||
const EMOJI_MAP = {
|
const EMOJI_MAP = {
|
||||||
fire: '🔥',
|
fire: '🔥',
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useEffect, useState } from 'react';
|
import React, { useEffect, useState } from 'react';
|
||||||
|
|
||||||
import Button from '@dailyjs/shared/components/Button';
|
import Button from '@custom/shared/components/Button';
|
||||||
import { TrayButton } from '@dailyjs/shared/components/Tray';
|
import { TrayButton } from '@custom/shared/components/Tray';
|
||||||
import { ReactComponent as IconStar } from '@dailyjs/shared/icons/star-md.svg';
|
import { ReactComponent as IconStar } from '@custom/shared/icons/star-md.svg';
|
||||||
|
|
||||||
const COOLDOWN = 1500;
|
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 withPlugins = require('next-compose-plugins');
|
||||||
const withTM = require('next-transpile-modules')([
|
const withTM = require('next-transpile-modules')([
|
||||||
'@dailyjs/shared',
|
'@custom/shared',
|
||||||
'@dailyjs/basic-call',
|
'@custom/basic-call',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const packageJson = require('./package.json');
|
const packageJson = require('./package.json');
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "@dailyjs/flying-emojis",
|
"name": "@custom/flying-emojis",
|
||||||
"description": "Basic Call + Flying Emojis",
|
"description": "Basic Call + Flying Emojis",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dailyjs/basic-call": "*",
|
"@custom/basic-call": "*",
|
||||||
"@dailyjs/shared": "*",
|
"@custom/shared": "*",
|
||||||
"next": "^11.0.0",
|
"next": "^11.0.0",
|
||||||
"pluralize": "^8.0.0",
|
"pluralize": "^8.0.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
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 AppWithEmojis from '../components/App';
|
||||||
import Tray from '../components/Tray';
|
import Tray from '../components/Tray';
|
||||||
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import Index from '@dailyjs/basic-call/pages';
|
import Index from '@custom/basic-call/pages';
|
||||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||||
|
|
||||||
export async function getStaticProps() {
|
export async function getStaticProps() {
|
||||||
const defaultProps = getDemoProps();
|
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 React from 'react';
|
||||||
|
|
||||||
import App from '@dailyjs/basic-call/components/App';
|
import App from '@custom/basic-call/components/App';
|
||||||
import { RecordingProvider } from '../../contexts/RecordingProvider';
|
import { RecordingProvider } from '../../contexts/RecordingProvider';
|
||||||
|
|
||||||
// Extend our basic call app component with the recording context
|
// Extend our basic call app component with the recording context
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
import { TrayButton } from '@dailyjs/shared/components/Tray';
|
import { TrayButton } from '@custom/shared/components/Tray';
|
||||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||||
import { ReactComponent as IconRecord } from '@dailyjs/shared/icons/record-md.svg';
|
import { ReactComponent as IconRecord } from '@custom/shared/icons/record-md.svg';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
RECORDING_ERROR,
|
RECORDING_ERROR,
|
||||||
|
|
@ -1,7 +1,7 @@
|
||||||
const withPlugins = require('next-compose-plugins');
|
const withPlugins = require('next-compose-plugins');
|
||||||
const withTM = require('next-transpile-modules')([
|
const withTM = require('next-transpile-modules')([
|
||||||
'@dailyjs/shared',
|
'@custom/shared',
|
||||||
'@dailyjs/basic-call',
|
'@custom/basic-call',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const packageJson = require('./package.json');
|
const packageJson = require('./package.json');
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "@dailyjs/live-fitness",
|
"name": "@custom/live-fitness",
|
||||||
"description": "Live Fitness",
|
"description": "Live Fitness",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dailyjs/shared": "*",
|
"@custom/shared": "*",
|
||||||
"@dailyjs/basic-call": "*",
|
"@custom/basic-call": "*",
|
||||||
"next": "^11.0.0",
|
"next": "^11.0.0",
|
||||||
"pluralize": "^8.0.0",
|
"pluralize": "^8.0.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import React from 'react';
|
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 AppWithRecording from '../components/App';
|
||||||
|
|
||||||
import { RecordingModal } from '../components/RecordingModal';
|
import { RecordingModal } from '../components/RecordingModal';
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import Index from '@dailyjs/basic-call/pages';
|
import Index from '@custom/basic-call/pages';
|
||||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||||
|
|
||||||
export async function getStaticProps() {
|
export async function getStaticProps() {
|
||||||
const defaultProps = getDemoProps();
|
const defaultProps = getDemoProps();
|
||||||
|
|
@ -4,7 +4,7 @@
|
||||||
|
|
||||||
### Live example
|
### 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
|
mv env.example .env.local
|
||||||
|
|
||||||
yarn
|
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).
|
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 React from 'react';
|
||||||
|
|
||||||
import App from '@dailyjs/basic-call/components/App';
|
import App from '@custom/basic-call/components/App';
|
||||||
import Room from '@dailyjs/basic-call/components/Room';
|
import Room from '@custom/basic-call/components/Room';
|
||||||
import PaginatedVideoGrid from '../PaginatedVideoGrid';
|
import PaginatedVideoGrid from '../PaginatedVideoGrid';
|
||||||
|
|
||||||
export const AppWithPagination = () => (
|
export const AppWithPagination = () => (
|
||||||
|
|
@ -5,19 +5,19 @@ import React, {
|
||||||
useEffect,
|
useEffect,
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
import { Button } from '@dailyjs/shared/components/Button';
|
import { Button } from '@custom/shared/components/Button';
|
||||||
import Tile from '@dailyjs/shared/components/Tile';
|
import Tile from '@custom/shared/components/Tile';
|
||||||
import {
|
import {
|
||||||
DEFAULT_ASPECT_RATIO,
|
DEFAULT_ASPECT_RATIO,
|
||||||
MEETING_STATE_JOINED,
|
MEETING_STATE_JOINED,
|
||||||
} from '@dailyjs/shared/constants';
|
} from '@custom/shared/constants';
|
||||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||||
import { isLocalId } from '@dailyjs/shared/contexts/participantsState';
|
import { isLocalId } from '@custom/shared/contexts/participantsState';
|
||||||
import { useActiveSpeaker } from '@dailyjs/shared/hooks/useActiveSpeaker';
|
import { useActiveSpeaker } from '@custom/shared/hooks/useActiveSpeaker';
|
||||||
import { useCamSubscriptions } from '@dailyjs/shared/hooks/useCamSubscriptions';
|
import { useCamSubscriptions } from '@custom/shared/hooks/useCamSubscriptions';
|
||||||
import { ReactComponent as IconArrow } from '@dailyjs/shared/icons/raquo-md.svg';
|
import { ReactComponent as IconArrow } from '@custom/shared/icons/raquo-md.svg';
|
||||||
import sortByKey from '@dailyjs/shared/lib/sortByKey';
|
import sortByKey from '@custom/shared/lib/sortByKey';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { useDeepCompareMemo } from 'use-deep-compare';
|
import { useDeepCompareMemo } from 'use-deep-compare';
|
||||||
|
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import { TrayButton } from '@dailyjs/shared/components/Tray';
|
import { TrayButton } from '@custom/shared/components/Tray';
|
||||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||||
import { ReactComponent as IconAdd } from '@dailyjs/shared/icons/add-md.svg';
|
import { ReactComponent as IconAdd } from '@custom/shared/icons/add-md.svg';
|
||||||
|
|
||||||
export const Tray = () => {
|
export const Tray = () => {
|
||||||
const { callObject } = useCallState();
|
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 withPlugins = require('next-compose-plugins');
|
||||||
const withTM = require('next-transpile-modules')([
|
const withTM = require('next-transpile-modules')([
|
||||||
'@dailyjs/shared',
|
'@custom/shared',
|
||||||
'@dailyjs/basic-call',
|
'@custom/basic-call',
|
||||||
]);
|
]);
|
||||||
|
|
||||||
const packageJson = require('./package.json');
|
const packageJson = require('./package.json');
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
{
|
{
|
||||||
"name": "@dailyjs/pagination",
|
"name": "@custom/pagination",
|
||||||
"description": "Basic Call + Pagination",
|
"description": "Basic Call + Pagination",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
|
|
@ -10,8 +10,8 @@
|
||||||
"lint": "next lint"
|
"lint": "next lint"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@dailyjs/shared": "*",
|
"@custom/shared": "*",
|
||||||
"@dailyjs/basic-call": "*",
|
"@custom/basic-call": "*",
|
||||||
"next": "^11.0.0",
|
"next": "^11.0.0",
|
||||||
"pluralize": "^8.0.0",
|
"pluralize": "^8.0.0",
|
||||||
"react": "^17.0.2",
|
"react": "^17.0.2",
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
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 AppWithPagination from '../components/App';
|
||||||
|
|
||||||
import Tray from '../components/Tray';
|
import Tray from '../components/Tray';
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
import Index from '@dailyjs/basic-call/pages';
|
import Index from '@custom/basic-call/pages';
|
||||||
import getDemoProps from '@dailyjs/shared/lib/demoProps';
|
import getDemoProps from '@custom/shared/lib/demoProps';
|
||||||
|
|
||||||
export async function getStaticProps() {
|
export async function getStaticProps() {
|
||||||
const defaultProps = getDemoProps();
|
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
|
mv env.example .env.local
|
||||||
|
|
||||||
yarn
|
yarn
|
||||||
yarn workspace @dailyjs/recording dev
|
yarn workspace @custom/recording dev
|
||||||
```
|
```
|
||||||
|
|
||||||
### How does this demo work?
|
### How does this demo work?
|
||||||
|
|
@ -1,6 +1,6 @@
|
||||||
import React from 'react';
|
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';
|
import { RecordingProvider } from '../../contexts/RecordingProvider';
|
||||||
|
|
||||||
// Extend our basic call app component with the recording context
|
// Extend our basic call app component with the recording context
|
||||||
|
|
@ -1,10 +1,10 @@
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
import Button from '@dailyjs/shared/components/Button';
|
import Button from '@custom/shared/components/Button';
|
||||||
import { CardBody } from '@dailyjs/shared/components/Card';
|
import { CardBody } from '@custom/shared/components/Card';
|
||||||
import Modal from '@dailyjs/shared/components/Modal';
|
import Modal from '@custom/shared/components/Modal';
|
||||||
import Well from '@dailyjs/shared/components/Well';
|
import Well from '@custom/shared/components/Well';
|
||||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||||
import {
|
import {
|
||||||
RECORDING_COUNTDOWN_1,
|
RECORDING_COUNTDOWN_1,
|
||||||
RECORDING_COUNTDOWN_2,
|
RECORDING_COUNTDOWN_2,
|
||||||
|
|
@ -1,8 +1,8 @@
|
||||||
import React, { useEffect } from 'react';
|
import React, { useEffect } from 'react';
|
||||||
|
|
||||||
import { TrayButton } from '@dailyjs/shared/components/Tray';
|
import { TrayButton } from '@custom/shared/components/Tray';
|
||||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||||
import { ReactComponent as IconRecord } from '@dailyjs/shared/icons/record-md.svg';
|
import { ReactComponent as IconRecord } from '@custom/shared/icons/record-md.svg';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
RECORDING_ERROR,
|
RECORDING_ERROR,
|
||||||
|
|
@ -6,13 +6,13 @@ import React, {
|
||||||
useState,
|
useState,
|
||||||
} from 'react';
|
} from 'react';
|
||||||
|
|
||||||
import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
|
import { useCallState } from '@custom/shared/contexts/CallProvider';
|
||||||
import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
|
import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
|
||||||
import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
|
import { useUIState } from '@custom/shared/contexts/UIStateProvider';
|
||||||
import {
|
import {
|
||||||
CALL_STATE_REDIRECTING,
|
CALL_STATE_REDIRECTING,
|
||||||
CALL_STATE_JOINED,
|
CALL_STATE_JOINED,
|
||||||
} from '@dailyjs/shared/contexts/useCallMachine';
|
} from '@custom/shared/contexts/useCallMachine';
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import { useDeepCompareEffect } from 'use-deep-compare';
|
import { useDeepCompareEffect } from 'use-deep-compare';
|
||||||
|
|
||||||
|
Before Width: | Height: | Size: 281 KiB After Width: | Height: | Size: 281 KiB |