movie-web/src2/components/MovieRow.js

60 lines
2.3 KiB
JavaScript
Raw Normal View History

2021-07-14 00:31:37 +02:00
import React from 'react'
import { Arrow } from './Arrow'
import { PercentageOverlay } from './PercentageOverlay'
2021-10-25 21:16:10 +02:00
import { VideoProgressStore } from '../lib/storage/VideoProgress'
2021-08-07 10:55:39 +02:00
import './MovieRow.css'
2021-07-14 00:31:37 +02:00
// title: string
// onClick: () => void
export function MovieRow(props) {
2021-10-25 21:16:10 +02:00
const progressData = VideoProgressStore.get();
let progress;
let percentage = null;
2021-08-06 18:57:58 +02:00
if (props.type === "movie") {
2021-07-21 00:49:33 +02:00
progress = progressData?.[props.source]?.movie?.[props.slug]?.full
2021-08-06 18:57:58 +02:00
if (progress) {
percentage = Math.floor((progress.currentlyAt / progress.totalDuration) * 100)
}
}
function handleKeyPress(event){
if ((event.code === 'Enter' || event.code === 'Space') && props.onClick){
props.onClick();
}
}
2021-07-14 00:31:37 +02:00
return (
<div className="movieRow" tabIndex={0} onKeyPress={handleKeyPress} onClick={() => props.onClick && props.onClick()}>
2021-09-15 08:59:11 +02:00
{ (props.source === "lookmovie" || props.source === "xemovie") && (
2021-09-15 08:59:11 +02:00
<div className="subtitleIcon">
<svg id="subtitleIcon" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 4H4C2.897 4 2 4.897 2 6V18C2 19.103 2.897 20 4 20H20C21.103 20 22 19.103 22 18V6C22 4.897 21.103 4 20 4ZM11 10H8V14H11V16H8C6.897 16 6 15.103 6 14V10C6 8.897 6.897 8 8 8H11V10ZM18 10H15V14H18V16H15C13.897 16 13 15.103 13 14V10C13 8.897 13.897 8 15 8H18V10Z" fill="#EEEEEE"/>
</svg>
</div>
) }
2021-07-14 00:31:37 +02:00
<div className="left">
2021-08-07 10:55:39 +02:00
{/* <Cross /> */}
2021-09-15 09:26:17 +02:00
<div className="titleWrapper">
<div className="titleText">
{props.title}
&nbsp;
<span className="year">({props.year})</span>
<span className="seasonEpisodeSubtitle">{props.place ? ` - S${props.place.season}:E${props.place.episode}` : ''}</span>
</div>
</div>
2021-07-14 00:31:37 +02:00
</div>
2021-08-06 18:57:58 +02:00
2021-07-14 00:31:37 +02:00
<div className="watch">
<p>Watch {props.type}</p>
2021-07-14 00:31:37 +02:00
<Arrow/>
</div>
2021-08-06 18:57:58 +02:00
<PercentageOverlay percentage={props.percentage || percentage} />
2021-07-14 00:31:37 +02:00
</div>
)
}