From 7221ab7c1ce5a2d8cce36103fd99779dcbf0621e Mon Sep 17 00:00:00 2001
From: Nurul Aisyah <aisynurul99@gmail.com>
Date: Sun, 8 Dec 2019 23:42:39 +0700
Subject: [PATCH 1/4] test state and ref for reactplayer
---
src/components/Video/index.js | 25 ++++++++++++++++++++++---
src/containers/Course/index.js | 2 +-
2 files changed, 23 insertions(+), 4 deletions(-)
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
index 481cbd4..e13894e 100644
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@@ -1,18 +1,36 @@
-import React from 'react';
+import React, { useState, useEffect, createRef } from 'react';
import PropTypes from 'prop-types';
import ReactPlayer from 'react-player';
-
import Wrapper from './Wrapper';
+
function Video(props) {
+ const [played, setPlayed] = useState(0);
+
+ let player = createRef();
+
+ useEffect(() => {
+ setPlayed(0.3);
+ console.log(props.url);
+ }, []);
+
+ const handleProgress = (state) => {
+ console.log("progress", state, player.current.getCurrentTime());
+ if (player.current.getCurrentTime() < played) {
+ player.current.seekTo(parseFloat(played));
+ }
+ };
+
return (
<Wrapper>
<ReactPlayer
+ ref={player}
url={props.url}
- playing={props.playing}
width="unset"
height="unset"
controls
+ played={played}
+ onProgress={handleProgress}
/>
</Wrapper>
);
@@ -21,6 +39,7 @@ function Video(props) {
Video.propTypes = {
url: PropTypes.any.isRequired,
playing: PropTypes.bool,
+ activeVideo: PropTypes.string
};
export default Video;
diff --git a/src/containers/Course/index.js b/src/containers/Course/index.js
index 629ce27..22e94e6 100644
--- a/src/containers/Course/index.js
+++ b/src/containers/Course/index.js
@@ -53,7 +53,7 @@ const Course = props => {
return (
<div>
<Title>{data.course_name}</Title>
- <Video url={`${BASE_URL}${activeVideo}`} playing />
+ <Video url={`${BASE_URL}${activeVideo}`} activeVideo={activeVideo} playing />
<Tabs value={tabIndex} onChange={handleChange}>
<Tab label="Konten" />
<Tab label="Informasi" />
--
GitLab
From 996dfe2367886759f255c311ab58d8f6db228e2e Mon Sep 17 00:00:00 2001
From: Nurul Aisyah <aisynurul99@gmail.com>
Date: Mon, 9 Dec 2019 22:24:26 +0700
Subject: [PATCH 2/4] update video component -> save history on localstorage;
update course -> buat judul video tampil; update navbar -> buat content cs
bisa diklik
---
src/components/ContentTabItem/index.js | 2 +-
src/components/Header/Img.js | 4 ++--
src/components/Header/index.js | 18 +++++++++++----
src/components/Video/Wrapper.js | 11 +++++++++
src/components/Video/index.js | 27 ++++++++++++++--------
src/containers/Course/index.js | 23 ++++++++++++++----
src/containers/InformationTabPage/index.js | 4 ++--
7 files changed, 66 insertions(+), 23 deletions(-)
diff --git a/src/components/ContentTabItem/index.js b/src/components/ContentTabItem/index.js
index bbe5a13..9ee6d0f 100644
--- a/src/components/ContentTabItem/index.js
+++ b/src/components/ContentTabItem/index.js
@@ -41,7 +41,7 @@ const ContentTabItem = ({ sectionName, videos, changeVideo }) => {
key={i}
name={name}
changeVideo={changeVideo}
- videoFile={d.video_file}
+ videoFile={d}
/>
);
});
diff --git a/src/components/Header/Img.js b/src/components/Header/Img.js
index bbb63f5..35fd45d 100644
--- a/src/components/Header/Img.js
+++ b/src/components/Header/Img.js
@@ -3,8 +3,8 @@ import styled from 'styled-components';
import NormalImg from '../../components/Img';
const Img = styled(NormalImg)`
- width: 2%;
- height: 2%;
+ width: 50%;
+ height: 50%;
margin: 0 15px;
display: block;
`;
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index cfb2e41..294ef99 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -1,4 +1,5 @@
import React from 'react';
+import {Link} from 'react-router-dom';
import { fade, makeStyles } from '@material-ui/core/styles';
import AppBar from '@material-ui/core/AppBar';
import Toolbar from '@material-ui/core/Toolbar';
@@ -19,6 +20,10 @@ import IconLogout from './exit.svg';
import IconAdmin from './admin.svg';
const useStyles = makeStyles(theme => ({
+ brand: {
+ textDecoration: 'none',
+ color: 'black'
+ },
grow: {
flexGrow: 1,
},
@@ -169,10 +174,15 @@ export default function PrimarySearchAppBar() {
<div className={classes.grow}>
<AppBar position="static" color="default">
<Toolbar>
- <Img src={LogoCSUI} alt="Logo CS UI" />
- <Typography className={classes.title} variant="h6" noWrap>
- content
- </Typography>
+ <Link to="/">
+ <Img src={LogoCSUI} alt="Logo CS UI" />
+ </Link>
+ <Link to="/" className={classes.brand}>
+ <Typography className={classes.title} variant="h6" noWrap>
+ Content CS
+ </Typography>
+ </Link>
+
<div className={classes.search}>
<div className={classes.searchIcon}>
<SearchIcon />
diff --git a/src/components/Video/Wrapper.js b/src/components/Video/Wrapper.js
index 60cb1dd..38d0dbc 100644
--- a/src/components/Video/Wrapper.js
+++ b/src/components/Video/Wrapper.js
@@ -5,7 +5,13 @@ const Wrapper = styled.div`
margin: 0;
position: relative;
background: black;
+ &:focus {
+ outline: none;
+ }
&:before {
+ &:focus {
+ outline: none;
+ }
display: block;
content: '';
width: 100%;
@@ -21,6 +27,11 @@ const Wrapper = styled.div`
bottom: 0;
left: 0;
}
+ video {
+ &:focus {
+ outline: none;
+ }
+ }
`;
export default Wrapper;
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
index e13894e..1b71b6c 100644
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@@ -1,23 +1,32 @@
-import React, { useState, useEffect, createRef } from 'react';
+import React, { useState, useEffect, useRef } from 'react';
import PropTypes from 'prop-types';
import ReactPlayer from 'react-player';
import Wrapper from './Wrapper';
function Video(props) {
- const [played, setPlayed] = useState(0);
+ const [played, setPlayed] = useState(()=> {
+ return Number(localStorage.getItem(props.activeVideo) || 0);
+ });
- let player = createRef();
+ let player = useRef();
useEffect(() => {
- setPlayed(0.3);
- console.log(props.url);
- }, []);
+ if(player.current) {
+ setPlayed(parseFloat(localStorage.getItem(props.activeVideo)));
+ player.current.seekTo(played);
+ }
+ }, [props.activeVideo])
const handleProgress = (state) => {
- console.log("progress", state, player.current.getCurrentTime());
- if (player.current.getCurrentTime() < played) {
- player.current.seekTo(parseFloat(played));
+ let currentPlayer = player.current;
+ let currentPlayedTime = currentPlayer.getCurrentTime();
+ let durationTime = currentPlayer.getDuration();
+ if (currentPlayedTime < played) {
+ currentPlayer.seekTo(played);
+ } else if(currentPlayedTime > 0){
+ localStorage.setItem(props.activeVideo, currentPlayedTime/durationTime);
+ setPlayed(currentPlayedTime/durationTime);
}
};
diff --git a/src/containers/Course/index.js b/src/containers/Course/index.js
index 22e94e6..6b7eab8 100644
--- a/src/containers/Course/index.js
+++ b/src/containers/Course/index.js
@@ -22,7 +22,7 @@ const Course = props => {
const [loading, setLoading] = React.useState(true);
const [data, setData] = React.useState([]);
const [tabIndex, setTabIndex] = React.useState(0);
- const [activeVideo, setActiveVideo] = React.useState("");
+ const [activeVideo, setActiveVideo] = React.useState({});
const [isNotFound, setIsNotFound] = React.useState(false);
const handleChange = (event, newValue) => {
setTabIndex(newValue);
@@ -34,7 +34,7 @@ const Course = props => {
setData(res.data);
setLoading(false);
if (res.data.sections[0].videos[0].video_file) {
- setActiveVideo(res.data.sections[0].videos[0].video_file);
+ setActiveVideo(res.data.sections[0].videos[0]);
}
} else if (res.status === 404) setIsNotFound(true);
else
@@ -43,7 +43,6 @@ const Course = props => {
}, [props.match.params.courseId]);
const changeVideo = newVideo => {
- console.log(newVideo, "masuk")
setActiveVideo(newVideo);
};
@@ -52,8 +51,22 @@ const Course = props => {
return (
<div>
- <Title>{data.course_name}</Title>
- <Video url={`${BASE_URL}${activeVideo}`} activeVideo={activeVideo} playing />
+ { activeVideo.video_file ?
+ <React.Fragment>
+ <Title>{data.course_name} - {activeVideo.video_title}</Title>
+ <Video
+ url={`${BASE_URL}${activeVideo.video_file}`}
+ activeVideo={activeVideo.video_file} />
+ </React.Fragment>
+ :
+ <div
+ style={{height: "200px",
+ width: "100%",
+ display: "flex",
+ justifyContent: "center"}}>
+ Loading...
+ </div>
+ }
<Tabs value={tabIndex} onChange={handleChange}>
<Tab label="Konten" />
<Tab label="Informasi" />
diff --git a/src/containers/InformationTabPage/index.js b/src/containers/InformationTabPage/index.js
index b74fe54..5ec031b 100644
--- a/src/containers/InformationTabPage/index.js
+++ b/src/containers/InformationTabPage/index.js
@@ -22,8 +22,8 @@ const InformationTabPage = ({data}) => {
<p>{data.course_description}</p>
<p>Contributors: </p>
<ul>
- {authors.map( a => {
- return <li>{a}</li>
+ {authors.map( (author, idx) => {
+ return <li key={idx}>{author}</li>
})}
</ul>
</Wrapper>
--
GitLab
From 65b3400ec3dbf1462a5fcfb899343fa9855546ea Mon Sep 17 00:00:00 2001
From: Nurul Aisyah <aisynurul99@gmail.com>
Date: Wed, 11 Dec 2019 18:02:19 +0700
Subject: [PATCH 3/4] update logout href, removeitem localstorage, update video
component for seek on start
---
src/components/Header/index.js | 7 ++++++-
src/components/Video/index.js | 14 ++++++++------
2 files changed, 14 insertions(+), 7 deletions(-)
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 294ef99..c8616be 100644
--- a/src/components/Header/index.js
+++ b/src/components/Header/index.js
@@ -113,6 +113,11 @@ export default function PrimarySearchAppBar() {
setMobileMoreAnchorEl(event.currentTarget);
};
+ const handleLogout = () => {
+ console.log("logout",localStorage);
+ localStorage.removeItem("auth");
+ };
+
const menuId = 'primary-search-account-menu';
const renderMenu = (
<Menu
@@ -201,7 +206,7 @@ export default function PrimarySearchAppBar() {
<a href="/management">
<img src={IconAdmin} height="25px" alt="Icon Admin" />
</a>
- <a href="/logout">
+ <a href="/auth/logout" onClick={handleLogout}>
<img src={IconLogout} height="25px" alt="Icon Logout" />
</a>
</div>
diff --git a/src/components/Video/index.js b/src/components/Video/index.js
index 1b71b6c..7be707a 100644
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@@ -14,17 +14,19 @@ function Video(props) {
useEffect(() => {
if(player.current) {
setPlayed(parseFloat(localStorage.getItem(props.activeVideo)));
- player.current.seekTo(played);
+ if (player.current.getDuration()){
+ player.current.seekTo(played);
+ }
}
}, [props.activeVideo])
const handleProgress = (state) => {
let currentPlayer = player.current;
let currentPlayedTime = currentPlayer.getCurrentTime();
- let durationTime = currentPlayer.getDuration();
- if (currentPlayedTime < played) {
- currentPlayer.seekTo(played);
- } else if(currentPlayedTime > 0){
+ if (currentPlayedTime < played && currentPlayer.getDuration()) {
+ currentPlayer.seekTo(played);
+ } else if(currentPlayedTime > 0 && currentPlayer.getDuration()){
+ let durationTime = currentPlayer.getDuration();
localStorage.setItem(props.activeVideo, currentPlayedTime/durationTime);
setPlayed(currentPlayedTime/durationTime);
}
@@ -38,7 +40,7 @@ function Video(props) {
width="unset"
height="unset"
controls
- played={played}
+ played={played ? played : 0}
onProgress={handleProgress}
/>
</Wrapper>
--
GitLab
From 21994c1f5dba26fbc02007e9edb454dc71b1962b Mon Sep 17 00:00:00 2001
From: Nurul Aisyah <aisynurul99@gmail.com>
Date: Wed, 11 Dec 2019 22:59:58 +0700
Subject: [PATCH 4/4] update style footer
---
src/components/Footer/Wrapper.js | 23 +++++++++++++++++++++--
src/components/Footer/index.js | 14 +++++++++-----
2 files changed, 30 insertions(+), 7 deletions(-)
diff --git a/src/components/Footer/Wrapper.js b/src/components/Footer/Wrapper.js
index 628fe7b..e871e9b 100644
--- a/src/components/Footer/Wrapper.js
+++ b/src/components/Footer/Wrapper.js
@@ -8,13 +8,32 @@ const Wrapper = styled.footer`
background-color: #20232a;
color: white;
font-size: 12px;
- p {
- line-height: 1;
+ section {
+ div{
+ display:flex;
+ p {
+ margin: 0;
+ line-height: 1;
+ padding: 5px;
+ &:first-child {
+ border-right: 1px solid white;
+ }
+ &:last-child {
+ border-left: 1px solid white;
+ }
+ }
+ }
}
+
@media (max-width: 768px) {
flex-direction: column;
align-items: center;
text-align: center;
+ section {
+ div{
+ justify-content: center;
+ }
+ }
}
`;
diff --git a/src/components/Footer/index.js b/src/components/Footer/index.js
index b159839..82a2972 100644
--- a/src/components/Footer/index.js
+++ b/src/components/Footer/index.js
@@ -6,11 +6,15 @@ const Footer = () => {
return (
<Wrapper>
<section>
- <p>Kampus UI Depok, Indonesia 16424</p>
- <p>Telp: +62 21 786 3419</p>
- <p>Fax: +62 21 786 3415</p>
- <p>Email: humasfasilkom@cs.ui.ac.id</p>
- <p>Twitter: @FASILKOM_UI</p>
+ <div>
+ <p>Kampus UI Depok, Indonesia 16424</p>
+ <p>humasfasilkom@cs.ui.ac.id</p>
+ </div>
+ <div>
+ <p>Telp: +62 21 786 3419</p>
+ <p>Fax: +62 21 786 3415</p>
+ <p>Twitter: @FASILKOM_UI</p>
+ </div>
</section>
<section>
<p>Copyright © 2019 Fakultas Ilmu Komputer Universitas Indonesia</p>
--
GitLab