diff --git a/src/components/Footer/Wrapper.js b/src/components/Footer/Wrapper.js
index 628fe7bbaa92d62c7258a0068f8f08afc3106a17..e871e9bfa9ef704fdf43f6dd7a23f6e74cf24685 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 b1598392775ef1225813e7af17a0df8515784114..82a297222796fe4b5b4d17a07db75194e0f392d4 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>
diff --git a/src/components/Header/index.js b/src/components/Header/index.js
index 288725b795a9008fd43758449f148d5cc3e43729..fa21d4c5e0840889b852e0a6f2a3094b4be338ae 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,
},
@@ -123,6 +128,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
@@ -193,8 +203,8 @@ export default function PrimarySearchAppBar() {
<a href="/management">
<img src={IconAdmin} height="25px" alt="Icon Admin" className={classes.iconTopNavbar} />
</a>
- <a href="/logout">
- <img src={IconLogout} height="25px" alt="Icon Logout" className={classes.iconTopNavbar} />
+ <a href="/auth/logout" onClick={handleLogout}>
+ <img src={IconLogout} height="25px" alt="Icon Logout" />
</a>
</div>
<div className={classes.sectionMobile}>
diff --git a/src/components/Video/Wrapper.js b/src/components/Video/Wrapper.js
index 60cb1ddeb5304c379db1ca8e31e179f1d5c0ef9c..38d0dbc5ea5892cbf1b0c677ecd58a0806b58ea7 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 481cbd45eb26fbce58a97adc98840e2ab163bde3..7be707afff97fd62c996e2e85006531630c4967d 100644
--- a/src/components/Video/index.js
+++ b/src/components/Video/index.js
@@ -1,18 +1,47 @@
-import React 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(()=> {
+ return Number(localStorage.getItem(props.activeVideo) || 0);
+ });
+
+ let player = useRef();
+
+ useEffect(() => {
+ if(player.current) {
+ setPlayed(parseFloat(localStorage.getItem(props.activeVideo)));
+ if (player.current.getDuration()){
+ player.current.seekTo(played);
+ }
+ }
+ }, [props.activeVideo])
+
+ const handleProgress = (state) => {
+ let currentPlayer = player.current;
+ let currentPlayedTime = currentPlayer.getCurrentTime();
+ 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);
+ }
+ };
+
return (
<Wrapper>
<ReactPlayer
+ ref={player}
url={props.url}
- playing={props.playing}
width="unset"
height="unset"
controls
+ played={played ? played : 0}
+ onProgress={handleProgress}
/>
</Wrapper>
);
@@ -21,6 +50,7 @@ function Video(props) {
Video.propTypes = {
url: PropTypes.any.isRequired,
playing: PropTypes.bool,
+ activeVideo: PropTypes.string
};
export default Video;
diff --git a/src/containers/CoursePage/index.js b/src/containers/CoursePage/index.js
index b36f4e64bc88e238bef033815b7b79aaf8c0f883..8256fd48a6babbb5bba8c44bc6af132d8b0db1f2 100644
--- a/src/containers/CoursePage/index.js
+++ b/src/containers/CoursePage/index.js
@@ -15,7 +15,8 @@ const Title = styled(Typography)`
font-size: 1.5rem !important;
background: black;
color: white;
- padding: 10px;
+ padding-left: 10px;
+ display: flex;
`;
const SubTitle = styled(Title)`
diff --git a/src/containers/InformationTabPage/index.js b/src/containers/InformationTabPage/index.js
index b74fe54d2d055dc22ee07e1b9afecd4ac14a087f..5ec031b9b2748b2fbcae08264b10967f162f12be 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>