Merge pull request #57 from harshithpabbati/mv-active-speaker

Move the active-speaker demo from daily-js folder to custom folder

custom/active-speaker/README.md

@@ -1,10 +1,8 @@
 # Active Speaker
 
-![Active speaker](./image.png)
-
 ### Live example
 
-**[See it in action here ➡️](https://dailyjs-active-speaker.vercel.app)**
+**[See it in action here ➡️](https://custom-active-speaker.vercel.app)**
 
 ---
 
@@ -23,7 +21,7 @@ Please note: this demo is not currently mobile optimised
 mv env.example .env.local
 
 yarn
-yarn workspace @dailyjs/active-speaker dev
+yarn workspace @custom/active-speaker dev
 ```
 
 ## Deploy your own on Vercel

custom/active-speaker/components/App/App.js

@@ -1,13 +1,13 @@
 import React from 'react';
 
-import App from '@dailyjs/basic-call/components/App';
+import App from '@custom/basic-call/components/App';
 import { Room } from '../Room';
 
 // Extend our basic call app component with our custom Room componenet
 export const AppWithSpeakerViewRoom = () => (
   <App
     customComponentForState={{
-      room: () => <Room />,
+      room: <Room />,
     }}
   />
 );

custom/active-speaker/components/SpeakerView/SpeakerTile/SpeakerTile.js

@@ -1,7 +1,7 @@
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
-import { Tile } from '@dailyjs/shared/components/Tile';
-import { DEFAULT_ASPECT_RATIO } from '@dailyjs/shared/constants';
-import { useResize } from '@dailyjs/shared/hooks/useResize';
+import Tile from '@custom/shared/components/Tile';
+import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
+import { useResize } from '@custom/shared/hooks/useResize';
 import PropTypes from 'prop-types';
 
 const MAX_RATIO = DEFAULT_ASPECT_RATIO;

custom/active-speaker/components/SpeakerView/SpeakerView.js

@@ -1,12 +1,13 @@
 import React, { useEffect, useMemo, useRef } from 'react';
-import RoomContainer from '@dailyjs/basic-call/components/Room/RoomContainer';
-import ParticipantBar from '@dailyjs/shared/components/ParticipantBar/ParticipantBar';
-import VideoContainer from '@dailyjs/shared/components/VideoContainer/VideoContainer';
-import { useCallState } from '@dailyjs/shared/contexts/CallProvider';
-import { useParticipants } from '@dailyjs/shared/contexts/ParticipantsProvider';
-import { useTracks } from '@dailyjs/shared/contexts/TracksProvider';
-import { useUIState } from '@dailyjs/shared/contexts/UIStateProvider';
-import { isScreenId } from '@dailyjs/shared/contexts/participantsState';
+import { Container } from '@custom/basic-call/components/Call/Container';
+import Header from '@custom/basic-call/components/Call/Header';
+import ParticipantBar from '@custom/shared/components/ParticipantBar/ParticipantBar';
+import VideoContainer from '@custom/shared/components/VideoContainer/VideoContainer';
+import { useCallState } from '@custom/shared/contexts/CallProvider';
+import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';
+import { useTracks } from '@custom/shared/contexts/TracksProvider';
+import { useUIState } from '@custom/shared/contexts/UIStateProvider';
+import { isScreenId } from '@custom/shared/contexts/participantsState';
 import { SpeakerTile } from './SpeakerTile';
 
 const SIDEBAR_WIDTH = 186;
@@ -78,13 +79,14 @@ export const SpeakerView = () => {
 
   return (
     <div className="speaker-view">
-      <RoomContainer>
+      <Container>
+        <Header />
         <VideoContainer>
           <div ref={activeRef} className="active">
             <SpeakerTile participant={currentSpeaker} screenRef={activeRef} />
           </div>
         </VideoContainer>
-      </RoomContainer>
+      </Container>
       {showSidebar && (
         <ParticipantBar
           fixed={fixedItems}

custom/active-speaker/next.config.js

@@ -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');

custom/active-speaker/package.json

@@ -1,5 +1,5 @@
 {
-  "name": "@dailyjs/active-speaker",
+  "name": "@custom/active-speaker",
   "description": "Basic Call + Active Speaker",
   "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",

custom/active-speaker/pages/_app.js

@@ -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 AppWithSpeakerViewRoom from '../components/App';
 
 App.customAppComponent = <AppWithSpeakerViewRoom />;

custom/active-speaker/pages/index.js

@@ -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();

custom/shared/components/ParticipantBar/ParticipantBar.js

@@ -5,7 +5,7 @@ import React, {
   useRef,
   useState,
 } from 'react';
-import { Tile } from '@custom/shared/components/Tile';
+import Tile from '@custom/shared/components/Tile';
 import { DEFAULT_ASPECT_RATIO } from '@custom/shared/constants';
 import { useCallState } from '@custom/shared/contexts/CallProvider';
 import { useParticipants } from '@custom/shared/contexts/ParticipantsProvider';