update ui, yt feature

qridwan · Mar 7, 2023 · 7cfe74f · 7cfe74f
1 parent 5a166d5
commit 7cfe74f
Show file tree

Hide file tree

Showing 18 changed files with 260 additions and 80 deletions.
diff --git a/.github/workflows/gcp.yml b/.github/workflows/gcp.yml
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -25,6 +25,7 @@
     "ioredis": "^4.28.5",
     "pg": "^8.8.0",
     "pm2": "^5.2.2",
+    "rc-slider": "^10.1.1",
     "react": "^17.0.2",
     "react-colorful": "^5.6.1",
     "react-dom": "^17.0.2",

diff --git a/server/server.ts b/server/server.ts
@@ -273,10 +273,12 @@ app.get('/youtube-trending', async (req, res) => {
   }
 });
 app.post('/createRoom', async (req, res) => {
+  const roomData = req.body;
+
   const genName = () => '/' + makeName(config.SHARD);
   let name = genName();
   console.log('createRoom: ', name);
-  const newRoom = new Room(io, name);
+  const newRoom = new Room(io, name, JSON.stringify(roomData));
   if (postgres) {
     const now = new Date();
     const roomObj: any = {
@@ -290,6 +292,7 @@ app.post('/createRoom', async (req, res) => {
       redisCount('createRoomError');
     }
   }
+
   const decoded = await validateUserToken(req.body?.uid, req.body?.token);
   newRoom.creator = decoded?.email;
   const preload = (req.body?.video || '').slice(0, 20000);
@@ -302,6 +305,36 @@ app.post('/createRoom', async (req, res) => {
   rooms.set(name, newRoom);
   res.json({ name: name.slice(1) });
 });
+// app.post('/createRoom', async (req, res) => {
+//   const genName = () => '/' + makeName(config.SHARD);
+//   let name = genName();
+//   console.log('createRoom: ', name);
+//   const newRoom = new Room(io, name);
+//   if (postgres) {
+//     const now = new Date();
+//     const roomObj: any = {
+//       roomId: newRoom.roomId,
+//       lastUpdateTime: now,
+//       creationTime: now,
+//     };
+//     try {
+//       await insertObject(postgres, 'room', roomObj);
+//     } catch (e) {
+//       redisCount('createRoomError');
+//     }
+//   }
+//   const decoded = await validateUserToken(req.body?.uid, req.body?.token);
+//   newRoom.creator = decoded?.email;
+//   const preload = (req.body?.video || '').slice(0, 20000);
+//   if (preload) {
+//     redisCount('createRoomPreload');
+//     newRoom.video = preload;
+//     newRoom.paused = true;
+//     await newRoom.saveRoom();
+//   }
+//   rooms.set(name, newRoom);
+//   res.json({ name: name.slice(1) });
+// });
 
 app.post('/manageSub', async (req, res) => {
   const decoded = await validateUserToken(req.body?.uid, req.body?.token);

diff --git a/src/assets/placeholder/placeholder-image.webp b/src/assets/placeholder/placeholder-image.webp
diff --git a/src/assets/upload/copied.svg b/src/assets/upload/copied.svg
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -10,7 +10,6 @@ import {
   DropdownProps,
   Grid,
   Icon,
-  Input,
   Loader,
   Message,
   Popup,
@@ -1608,7 +1607,7 @@ export default class App extends React.Component<AppProps, AppState> {
     // );
     return (
       <React.Fragment>
-        {!this.state.isAutoPlayable && (
+        {/* {!this.state.isAutoPlayable && (
           <Modal inverted basic open>
             <div style={{ display: 'flex', justifyContent: 'center' }}>
               <Button
@@ -1627,7 +1626,7 @@ export default class App extends React.Component<AppProps, AppState> {
               </Button>
             </div>
           </Modal>
-        )}
+        )} */}
         {this.state.isUploadPress && (
           <UploadFile toggleIsUploadPress={this.toggleIsUploadPress} />
           // <Modal inverted basic open>

diff --git a/src/components/ComboBox/ComboBox.module.css b/src/components/ComboBox/ComboBox.module.css
@@ -7,7 +7,7 @@
   width: 100vw;
   position: absolute;
   top: 18px;
-  max-height: 65vh;
+  max-height: 80vh;
   overflow: auto;
   z-index: 900;
 }
@@ -18,7 +18,13 @@
 .PlaylistDropdown {
   background-color: #1f1f1f !important;
   color: #f4f4f4 !important;
-  width: 150px;
+  width: 180px;
+
+  display: flex !important;
+  align-items: center !important;
+}
+.PlaylistDropdown > .text {
+  font-size: 1.3wv !important;
 }
 .PlaylistMenu {
   background: black !important;

diff --git a/src/components/ComboBox/ComboBox.tsx b/src/components/ComboBox/ComboBox.tsx
@@ -172,6 +172,7 @@ export class ComboBox extends React.Component<ComboBoxProps> {
             style={{ flexGrow: 1 }}
             fluid
             focus
+            size="massive"
             disabled={this.props.disabled}
             onChange={this.doSearch}
             onFocus={(e: any) => {
@@ -242,7 +243,10 @@ export class ComboBox extends React.Component<ComboBoxProps> {
           >
             <Dropdown.Menu direction="left" className={styles.PlaylistMenu}>
               {this.props.playlist.length === 0 && (
-                <Dropdown.Item disabled style={{ color: 'white' }}>
+                <Dropdown.Item
+                  disabled
+                  style={{ color: 'white', fontSize: '1.2vw' }}
+                >
                   There are no items in the playlist.
                 </Dropdown.Item>
               )}
@@ -281,7 +285,7 @@ export class ComboBox extends React.Component<ComboBoxProps> {
           <Button
             icon
             labelPosition="right"
-            size="tiny"
+            size="big"
             className={styles.UploadButton}
             onClick={() => toggleIsUploadPress()}
           >

diff --git a/src/components/Controls/Controls.tsx b/src/components/Controls/Controls.tsx
@@ -1,8 +1,9 @@
 import React from 'react';
 import { Icon, Progress, Label, Popup } from 'semantic-ui-react';
-import { Slider } from 'react-semantic-ui-range';
+// import { Slider } from 'react-semantic-ui-range';
 import { formatTimestamp } from '../../utils';
 import styles from './Controls.module.css';
+import Slider from 'rc-slider';
 interface ControlsProps {
   duration: number;
   togglePlay: Function;
@@ -84,15 +85,15 @@ export class Controls extends React.Component<ControlsProps> {
             }}
           >
             <Icon
-              size="big"
+              size="huge"
               onClick={() => onSeek(null, currentTime - 10)}
               className={styles.Btn}
               name="angle double left"
               // style={{ transform: 'rotate(180deg)' }}
               title="Backward 10 seconds"
             />
             <Icon
-              size="big"
+              size="huge"
               onClick={() => {
                 togglePlay();
               }}
@@ -101,7 +102,7 @@ export class Controls extends React.Component<ControlsProps> {
               name={paused ? 'play circle outline' : 'pause circle outline'}
             />
             <Icon
-              size="big"
+              size="huge"
               onClick={() => onSeek(null, currentTime + 10)}
               className={styles.Btn}
               name="angle double right"
@@ -119,7 +120,7 @@ export class Controls extends React.Component<ControlsProps> {
                 }
                 trigger={
                   <Icon
-                    size="large"
+                    size="huge"
                     onClick={jumpToLeader}
                     disabled={!isBehind}
                     className={`${styles.Btn} control action ${
@@ -139,14 +140,14 @@ export class Controls extends React.Component<ControlsProps> {
                 title="Theater Mode"
               /> */}
               <Icon
-                size="big"
+                size="huge"
                 onClick={() => fullScreen(true)}
                 className="control action"
                 name="expand"
                 title="Fullscreen"
               />
               <Icon
-                size="big"
+                size="huge"
                 onClick={() => {
                   showSubtitle();
                 }}
@@ -157,29 +158,44 @@ export class Controls extends React.Component<ControlsProps> {
                 title="Captions"
               />
               <Icon
-                size="big"
+                size="huge"
                 onClick={() => {
                   toggleMute();
                 }}
                 className="control action"
                 name={muted ? 'volume off' : 'volume up'}
                 title="Mute"
               />
-              <div style={{ width: '120px', marginRight: '0px' }}>
+              <div style={{ width: '150px', marginRight: '0px' }}>
                 <Slider
                   value={volume}
-                  color={'blue'}
+                  railStyle={{ height: 15 }}
+                  trackStyle={{ height: 15 }}
+                  handleStyle={{
+                    height: 32,
+                    width: 32,
+                    marginLeft: -14,
+                    marginTop: -9,
+                  }}
+                  min={0}
+                  max={1}
+                  step={0.01}
                   disabled={muted}
-                  settings={{
-                    min: 0,
-                    max: 1,
-                    step: 0.01,
-                    onChange: (value: number) => {
-                      if (value !== this.props.volume && !isNaN(value)) {
-                        this.props.setVolume(value);
-                      }
-                    },
+                  onChange={(value: any) => {
+                    if (value !== this.props.volume && !isNaN(value)) {
+                      this.props.setVolume(value);
+                    }
                   }}
+                  // settings={{
+                  //   min: 0,
+                  //   max: 1,
+                  //   step: 0.01,
+                  //   onChange: (value: number) => {
+                  //     if (value !== this.props.volume && !isNaN(value)) {
+                  //       this.props.setVolume(value);
+                  //     }
+                  //   },
+                  // }}
                 />
               </div>
             </div>
@@ -190,7 +206,7 @@ export class Controls extends React.Component<ControlsProps> {
           {/* ====================== Progress ====================== */}
           <div className="control">{formatTimestamp(currentTime)}</div>
           <Progress
-            size="tiny"
+            size="small"
             color="blue"
             onClick={
               duration < Infinity && !this.props.disabled ? onSeek : undefined
@@ -227,7 +243,7 @@ export class Controls extends React.Component<ControlsProps> {
               </div>
             )}
           </Progress>
-          <div className="control">{formatTimestamp(duration)}</div>
+          <div className={`control `}>{formatTimestamp(duration)}</div>
           {/* ====================== Progress END ====================== */}
         </div>
       </>

diff --git a/src/components/EmptyTheatre/EmptyTheatre.module.css b/src/components/EmptyTheatre/EmptyTheatre.module.css
@@ -18,8 +18,10 @@
 }
 .content p {
   text-align: center;
-  font-size: 15px;
+  font-size: 1.8vw;
   margin: 4px;
-  line-height: 1.1rem;
   color: #fff9f9b5;
 }
+.btncontainer {
+  margin: 20px 0px;
+}