Skip to content

Commit

Permalink
feat: improve private playlist and player
Browse files Browse the repository at this point in the history 
this closes #276
  • Loading branch information
@marianzburlea
marianzburlea committed Sep 27, 2019
1 parent f18363f commit 8d3e2b8
Show file tree
Hide file tree
Showing 2 changed files with 105 additions and 69 deletions.
97 changes: 58 additions & 39 deletions src/component/course-play-list/course-play-list.component.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import React, { useEffect, useState } from 'react'
import { db } from '../data/firebase';
import { StyledVideo, StyledVideoOverlay } from '../play-video/play-video.style';
import { StyledListRow, StyledListDescription, StyledListImageWrapper, StyledListVideo, StyledListVideoIframe, StyledListLevelRequired } from './course-play-list.style';
import { StyledListRow, StyledListDescription, StyledListImageWrapper, StyledListVideo, StyledListVideoIframe, StyledListLevelRequired, StyledPlayerAndList, StyledList, StyledListWrapper, StyledPlayWrapper, StyledListTitle, StyledListDuration } from './course-play-list.style';
import { WebInfoState } from '../web-info/web-info.context';

const mapLevel = {
Expand All @@ -12,6 +12,7 @@ const mapLevel = {
}

const CoursePlayList = ({ courseId }) => {
const [vimeoVideoId, setVimeoVideoId] = useState(null)
const lectureCollection = db.collection('lecture')
const courseCollection = db.collection('course')
const sectionCollection = db.collection('section')
Expand All @@ -37,7 +38,15 @@ const CoursePlayList = ({ courseId }) => {
const lectureList = [...lectureListSnap.docs].map(doc => ({ ...doc.data(), id: doc.id })).sort((a, b) => a.order - b.order)
updateData({lectureList, sectionList, course})
})()
return () => {
console.log('This is unload')
}
}, [])

const onTimeUpdate = ({ seconds, duration }) => {
console.log(~~seconds, ~~duration)
}

const { course, sectionList, lectureList } = data
return (
<div>
Expand All @@ -55,44 +64,54 @@ const CoursePlayList = ({ courseId }) => {
></iframe>}
</StyledVideo>}

{course.version && course.version === 2 && <div>
{sectionList.map(section => {
return (
<div key={section.id}>
<h2>{section.title}</h2>
<div>
{lectureList
.filter(lecture => lecture.section.id === section.id && lecture.published)
.map(lecture => {
const { youtubeVideoId = ''} = lecture
return (
<StyledListRow key={lecture.id}>
<StyledListImageWrapper>
{youtubeVideoId && <img src={`http://img.youtube.com/vi/${youtubeVideoId}/0.jpg`} alt=""/>}
</StyledListImageWrapper>
<h3>{lecture.title}</h3>
<StyledListDescription>{lecture.description}</StyledListDescription>
<div>{lecture.duration}</div>
{lecture.levelRequired <= mapLevel[planLevel] && <StyledListVideo>
<StyledListVideoIframe
src={`https://player.vimeo.com/video/${lecture.vimeoVideoId}`}
frameBorder="0"
allow="autoplay; fullscreen"
allowFullScreen />
</StyledListVideo>}
{lecture.levelRequired > mapLevel[planLevel] && <StyledListLevelRequired>
<p>Your CodeTap member level needs to be increased in order to watch this video.</p>
<p>Consider subscribing or upgrading your subscription.</p>
</StyledListLevelRequired>}
</StyledListRow>
)
})
}
</div>
</div>
)
})}
</div>}
{course.version && course.version === 2 && <StyledPlayerAndList>
<StyledPlayWrapper>
{vimeoVideoId && <StyledListVideoIframe
video={vimeoVideoId}
onTimeUpdate={onTimeUpdate}
/>}
{/* {lecture.levelRequired <= mapLevel[planLevel] && <StyledListVideo>
</StyledListVideo>} */}
</StyledPlayWrapper>
<StyledListWrapper>
<StyledList>
{sectionList.map(section => {
return (
<div key={section.id}>
<h2>{section.title}</h2>
<div>
{lectureList
.filter(lecture => lecture.section.id === section.id && lecture.published)
.map(lecture => {
const { youtubeVideoId = ''} = lecture
return (
<StyledListRow key={lecture.id}>
<StyledListImageWrapper
onClick={() => {
console.log(lecture.vimeoVideoId)
setVimeoVideoId(lecture.vimeoVideoId)
}}
>
{youtubeVideoId && <img src={`http://img.youtube.com/vi/${youtubeVideoId}/0.jpg`} alt=""/>}
</StyledListImageWrapper>
<StyledListTitle>{lecture.title}</StyledListTitle>
<StyledListDuration>{lecture.duration}</StyledListDuration>
<StyledListDescription>{lecture.description}</StyledListDescription>
</StyledListRow>
)
})
}
</div>
{/* {lecture.levelRequired > mapLevel[planLevel] && <StyledListLevelRequired>
<p>Your CodeTap member level needs to be increased in order to watch this video.</p>
<p>Consider subscribing or upgrading your subscription.</p>
</StyledListLevelRequired>} */}
</div>
)
})}
</StyledList>
</StyledListWrapper>
</StyledPlayerAndList>}
</div>
)
}
Expand Down
77 changes: 47 additions & 30 deletions src/component/course-play-list/course-play-list.style.js
View file
Original file line number Diff line number Diff line change
@@ -1,49 +1,66 @@
import styled from 'styled-components'
import Vimeo from '@u-wave/react-vimeo'
import React from 'react'

export const StyledListImageWrapper = styled.div`
grid-row: 1/3;
grid-column: 1/2;
export const StyledListVideoIframe = styled(Vimeo)`
& > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
`

export const StyledListLevelRequired = styled.div`
grid-row: 3/4;
grid-column: 1/3;
export const StyledPlayWrapper = styled.div`
padding-top: 56.25%;
position: relative;
background-color: #c00;
color: white;
padding: 1rem 2rem;
border-radius: 0.5rem;
`

export const StyledListVideo = styled.div`
grid-row: 3/4;
export const StyledListDescription = styled.div`
grid-column: 1/3;
position: relative;
padding-top: 56.25%;
width: 100%;
margin-bottom: 1rem;
`
export const StyledListImageWrapper = styled.div`
grid-row: 1/3;
max-width: 100%;
cursor: pointer;
export const StyledListVideoIframe = styled.iframe`
img {
max-width: 100%;
}
`
export const StyledListWrapper = styled.div`
position: relative;
`
export const StyledList = styled.div`
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
`

export const StyledListDescription = styled.div`
grid-row: 2/3;
grid-column: 2/3;
bottom: 0;
right: 0;
overflow-y: auto;
`

export const StyledListRow = styled.div`
display: grid;
grid-template-columns: 1fr 2fr;
grid-gap: 0.5rem;
grid-template-columns: 208px 1fr 208px;
grid-template-rows: 60px auto auto;
margin-bottom: 2.5rem;
`

img {
max-width: 100%;
}
export const StyledListTitle = styled.h3`
margin: 0;
`

export const StyledListDuration = styled.div`
margin: 0;
font-size:0.9rem;
text-align: right;
padding-right: 0.5rem;
`

export const StyledPlayerAndList = styled.div`
display: grid;
grid-gap: 1rem;
grid-template-columns: 2fr 1fr;
margin-bottom: 2.5rem;
`

0 comments on commit 8d3e2b8

Please sign in to comment.