[BUGFIX] trial video and cover video

Author: kkshyu

src/components/blog/PostCover.tsx

@@ -3,13 +3,13 @@ import { Button, Icon as AntdIcon } from 'antd'
 import { useApp } from 'lodestar-app-element/src/contexts/AppContext'
 import React, { useCallback, useEffect, useRef, useState } from 'react'
 import { defineMessages, useIntl } from 'react-intl'
-import ReactPlayer from 'react-player'
 import styled, { css } from 'styled-components'
 import { desktopViewMixin } from '../../helpers'
 import { ReactComponent as ArrowUpCircleIcon } from '../../images/arrow-up-circle.svg'
 import EmptyCover from '../../images/empty-cover.png'
 import { ReactComponent as ShopOIcon } from '../../images/shop-o.svg'
 import { MerchandiseProps } from '../../types/merchandise'
+import { StyledPlayer } from '../program/ProgramBanner'
 import MerchandiseModal from './MerchandiseModal'
 
 const messages = defineMessages({
@@ -169,19 +169,19 @@ const PostCover: React.VFC<{
             <Icon as={ArrowUpCircleIcon} className="cursor-pointer" onClick={() => backToTop()} />
             <AntdIcon type="close" className="cursor-pointer" onClick={() => setIsClosed(true)} />
           </StyledHeader>
-          <StyledVideoWrapper>
-            <ReactPlayer
-              url={coverUrl || undefined}
-              width="100%"
-              height="100%"
-              style={{
-                position: 'absolute',
-                top: '0',
-                left: '0',
-              }}
-              controls
-            />
-          </StyledVideoWrapper>
+          {coverUrl && (
+            <StyledVideoWrapper>
+              <StyledPlayer>
+                <video
+                  className="smartvideo"
+                  src={coverUrl}
+                  controls
+                  autoPlay
+                  style={{ width: '100%', height: '100%' }}
+                />
+              </StyledPlayer>
+            </StyledVideoWrapper>
+          )}
         </StyledVideoBlock>
       </div>
 

src/components/common/VideoPlayer.tsx

@@ -21,7 +21,7 @@ const VideoPlayer: React.VFC<{ videoId: string; animated?: boolean } & Partial<S
     error: Error | null
   }>()
   useEffect(() => {
-    if (!initialized && authToken && videoId) {
+    if (!initialized && videoId) {
       setInitialized(true)
       axios
         .post(

src/components/program/ProgramBanner/PerpetualProgramBanner.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { StyledReactPlayer, StyledTags, StyledTitle, StyledVideoWrapper } from '.'
+import { StyledPlayer, StyledTags, StyledTitle, StyledVideoWrapper } from '.'
 import { ProgramProps } from '../../../types/program'
 import BlurredBanner from '../../common/BlurredBanner'
 import { BREAK_POINT } from '../../common/Responsive'
@@ -47,7 +47,15 @@ const PerpetualProgramBanner: React.VFC<{
         <StyledVideoBlock>
           <div className="container">
             <StyledVideoWrapper>
-              <StyledReactPlayer controls url={program.coverVideoUrl} width="100%" height="100%" />
+              <StyledPlayer>
+                <video
+                  className="smartvideo"
+                  src={program.coverVideoUrl}
+                  controls
+                  autoPlay
+                  style={{ width: '100%', height: '100%' }}
+                />
+              </StyledPlayer>
             </StyledVideoWrapper>
           </div>
         </StyledVideoBlock>

src/components/program/ProgramBanner/SubscriptionProgramBanner.tsx

@@ -2,7 +2,7 @@ import React from 'react'
 import { useIntl } from 'react-intl'
 import { Link } from 'react-router-dom'
 import styled from 'styled-components'
-import { StyledReactPlayer, StyledTags, StyledTitle, StyledVideoWrapper } from '.'
+import { StyledPlayer, StyledTags, StyledTitle, StyledVideoWrapper } from '.'
 import { productMessages } from '../../../helpers/translation'
 import { ProgramProps, ProgramRoleProps } from '../../../types/program'
 import MemberAvatar from '../../common/MemberAvatar'
@@ -64,7 +64,15 @@ const SubscriptionProgramBanner: React.VFC<{
       <StyledMediaBlock>
         <StyledVideoWrapper backgroundImage={program.coverUrl || ''}>
           {program.coverVideoUrl && (
-            <StyledReactPlayer controls url={program.coverVideoUrl} width="100%" height="100%" />
+            <StyledPlayer>
+              <video
+                className="smartvideo"
+                src={program.coverVideoUrl}
+                controls
+                autoPlay
+                style={{ width: '100%', height: '100%' }}
+              />
+            </StyledPlayer>
           )}
         </StyledVideoWrapper>
       </StyledMediaBlock>

src/components/program/ProgramBanner/index.tsx

@@ -1,4 +1,3 @@
-import ReactPlayer from 'react-player'
 import styled from 'styled-components'
 import { BREAK_POINT } from '../../common/Responsive'
 
@@ -25,7 +24,7 @@ export const StyledVideoWrapper = styled.div<{ backgroundImage?: string }>`
   background-size: cover;
   background-position: center;
 `
-export const StyledReactPlayer = styled(ReactPlayer)`
+export const StyledPlayer = styled.div`
   position: absolute;
   top: 0;
   right: 0;

src/components/project/FundingCoverBlock.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
-import ReactPlayer from 'react-player'
 import styled from 'styled-components'
+import { StyledPlayer } from '../program/ProgramBanner'
 
 const StyledWrapper = styled.div<{ coverType: string; coverUrl: string }>`
   position: relative;
@@ -18,12 +18,9 @@ const FundingCoverBlock: React.VFC<{
   return (
     <StyledWrapper coverType={coverType} coverUrl={coverUrl}>
       {coverType === 'video' && (
-        <ReactPlayer
-          url={coverUrl}
-          width="100%"
-          height="100%"
-          style={{ position: 'absolute', top: 0, right: 0, bottom: 0, left: 0 }}
-        />
+        <StyledPlayer>
+          <video className="smartvideo" src={coverUrl} controls autoPlay style={{ width: '100%', height: '100%' }} />
+        </StyledPlayer>
       )}
     </StyledWrapper>
   )