Merge pull request howardchung#5 from Bipolar-Factory:replacing-tv-pl…

…ayer fixed playlist auto play
qridwan · May 5, 2023 · 05f21cd · 05f21cd
2 parents 9fab159 + eb7f061
commit 05f21cd
Show file tree

Hide file tree

Showing 3 changed files with 63 additions and 51 deletions.
diff --git a/src/atoms/MetaButton.tsx b/src/atoms/MetaButton.tsx
@@ -15,7 +15,7 @@ const MetaButton: React.FunctionComponent<IMetaButtonProps> = (props) => {
   return (
     <button
       onClick={onClick}
-      className={`bg-gray-dark   border-none rounded-full ${props.className}`}
+      className={`border-0 right-0 outline-0  rounded-full ${props.className}`}
     >
       {text}
       {img && <img src={img} alt="__" className={props.imgClass} />}

diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
@@ -1049,6 +1049,7 @@ export default class App extends React.Component<AppProps, AppState> {
 
   doSrc = async (src: string, time: number) => {
     console.log('doSrc', src, time);
+    this.doSeek(time);
     // if (this.isScreenShare() || this.isFileShare() || this.isVBrowser()) {
     //   // No-op as we'll set video when WebRTC completes
     //   return;
@@ -1931,54 +1932,63 @@ export default class App extends React.Component<AppProps, AppState> {
                           </div>
                         )}
 
-                        {(this.isYouTube() || this.isVideo()) &&
-                          !this.state.isHome && (
-                            <div className="videoContent">
-                              <main
-                                style={{
-                                  display:
-                                    (this.isYouTube() || this.isVideo()) &&
-                                    !this.state.loading &&
-                                    !this.state.isHome
-                                      ? 'block'
-                                      : 'none',
-                                  position: 'relative',
-                                  paddingTop: '56.25%',
-                                  /* Player ratio: 100 / (1280 / 720) */
-                                }}
-                              >
-                                <ReactPlayer
-                                  ref={this.playerRef}
-                                  config={{
-                                    youtube: {
-                                      playerVars: {
-                                        // autoplay: 1,
-                                        controls: 0,
-                                        disablekb: 1,
-                                        iv_load_policy: 3,
-                                        modestbranding: 1,
-                                        rel: 0,
-                                        showinfo: 0,
-                                      },
-                                    },
-                                  }}
-                                  volume={this.getVolume()}
-                                  muted={this.state.isMute}
-                                  playing={!this.state.currentMediaPaused}
-                                  // muted={this.isMuted()}
-                                  className="react-player"
-                                  width="100%"
-                                  // playing={this.paused()}
-                                  // onPlay={}
-                                  height="100%"
-                                  id="leftYt"
-                                  url={this.state.currentMedia}
-                                  // autoplay
-                                />
-                              </main>
-                            </div>
-
-                            // <iframe
+                        {/* {(this.isYouTube() || this.isVideo()) &&
+                          !this.state.isHome && ( */}
+                        <div
+                          className="videoContent"
+                          style={{
+                            display:
+                              (this.isYouTube() || this.isVideo()) &&
+                              !this.state.loading &&
+                              !this.state.isHome
+                                ? 'block'
+                                : 'none',
+                          }}
+                        >
+                          <main
+                            style={{
+                              // height: '100%',
+                              // width: '100%',
+                              position: 'relative',
+                              paddingTop: '56.25%',
+                              // // paddingTop: '56.88%'
+                              // /* Player ratio: 100 / (1280 / 720) */
+                            }}
+                          >
+                            <ReactPlayer
+                              ref={this.playerRef}
+                              config={{
+                                youtube: {
+                                  playerVars: {
+                                    // autoplay: 1,
+                                    controls: 0,
+                                    disablekb: 1,
+                                    iv_load_policy: 3,
+                                    modestbranding: 1,
+                                    rel: 0,
+                                    showinfo: 0,
+                                  },
+                                },
+                              }}
+                              volume={this.getVolume()}
+                              muted={this.state.isMute}
+                              playing={!this.state.currentMediaPaused}
+                              // muted={this.isMuted()}
+                              className="react-player"
+                              width="100%"
+                              height="100%"
+                              // playing={this.paused()}
+                              // onPlay={}
+                              id="leftYt"
+                              url={this.state.currentMedia}
+                              onEnded={this.onVideoEnded}
+                              // autoplay
+                            />
+                          </main>
+                        </div>
+                        {/* )} */}
+
+                        {/* // <iframe
                             //   style={{
                             //     display:
                             //       this.isYouTube() &&
@@ -1994,8 +2004,8 @@ export default class App extends React.Component<AppProps, AppState> {
                             //   frameBorder="0"
                             //   allow="autoplay"
                             //   src="https://www.youtube.com/embed/?enablejsapi=1&controls=0&rel=0&autoplay=1"
-                            // />
-                          )}
+                            // /> */}
+
                         {/* {this.isVBrowser() &&
                           this.getVBrowserPass() &&
                           this.getVBrowserHost() ? (

diff --git a/src/components/ComboBox/ComboBox.tsx b/src/components/ComboBox/ComboBox.tsx
@@ -253,7 +253,9 @@ export class ComboBox extends React.Component<ComboBoxProps> {
           >
             <MetaButton
               onClick={() => toggleHome()}
+              className="p-0 border-none"
               img={BackIcon}
+              imgClass="bg-gray-dark rounded-full"
             ></MetaButton>
 
             <div className={styles.inputContainer}>