Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-12-24 19:11:49 +01:00
Code Issues Packages Projects Releases Wiki Activity

Merge pull request #29 from mansoor-roeen-glitch/master

Browse Source 
Added subtitles accessibility for Lookmovie
This commit is contained in:
James Hawkins 2021-09-15 09:13:26 +01:00 committed by GitHub
commit 14d82dc558
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
6 changed files with 73 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/MovieRow.css
View File

@ -24,6 +24,13 @@
margin-right: 0.5rem;
}
.movieRow .left .titleWrapper {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.movieRow .left .seasonEpisodeSubtitle,
.movieRow .left .year {
color: var(--text-secondary);
@ -62,6 +69,14 @@
margin-right: 10px;
}
.subtitleIcon {
width: 30px;
display: flex;
justify-content: center;
align-items: center;
margin-right: 10px;
}
@media screen and (max-width: 400px) {
.movieRow {
flex-direction: column;

19
src/components/MovieRow.js
View File

@ -21,10 +21,25 @@ export function MovieRow(props) {
return (
<div className="movieRow" onClick={() => props.onClick && props.onClick()}>
{ props.source === "lookmovie" && (
<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>
) }
<div className="left">
{/* <Cross /> */}
{props.title}<span className="seasonEpisodeSubtitle">{props.place ? ` - S${props.place.season}:E${props.place.episode}` : ''}</span>&nbsp;
<span className="year">({props.year})</span>
<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>
</div>
<div className="watch">

9
src/components/VideoElement.js
View File

@ -9,7 +9,7 @@ import './VideoElement.css'
// setProgress: (event: NativeEvent) => void
// videoRef: useRef
// startTime: number
export function VideoElement({ streamUrl, loading, setProgress, videoRef, startTime }) {
export function VideoElement({ streamUrl, loading, setProgress, videoRef, startTime, streamData }) {
const [error, setError] = React.useState(false);
function onLoad() {
@ -48,11 +48,14 @@ export function VideoElement({ streamUrl, loading, setProgress, videoRef, startT
if (!streamUrl.endsWith('.mp4')) {
return (
<video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad} />
<video crossorigin="anonymous" className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
{ streamData.subtitles && streamData.subtitles.map((sub, index) => <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` } />) }
</video>
)
} else {
return (
<video className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
<video crossorigin="anonymous" className="videoElement" ref={videoRef} controls autoPlay onProgress={setProgress} onLoadedData={onLoad}>
{ streamData.subtitles && streamData.subtitles.map((sub, index) => <track key={index} kind="captions" label={sub.language} src={`${process.env.REACT_APP_CORS_PROXY_URL}https://lookmovie.io${sub.file}` } />) }
<source src={streamUrl} type="video/mp4" />
</video>
)

31
src/lib/scraper/lookmovie.js
View File

@ -50,9 +50,17 @@ async function findContent(searchTerm, type) {
}
}
async function getVideoUrl(config) {
const accessToken = await getAccessToken(config);
const { subtitles, token: accessToken } = await getAccessInfo(config);
const now = Math.floor(Date.now() / 1e3);
let subs;
if (config.type === "show") {
subs = await getEpisodeSubs(config);
} else if (config.type === "movie") {
subs = subtitles;
}
let url = '';
if (config.type === 'movie') {
@ -73,10 +81,17 @@ async function getVideoUrl(config) {
}
}
return videoUrl.startsWith("/") ? `${BASE_URL}${videoUrl}` : videoUrl;
return {
videoUrl: videoUrl.startsWith("/") ? `${BASE_URL}${videoUrl}` : videoUrl,
subs,
};
}
async function getAccessToken(config) {
async function getEpisodeSubs (config) {
return await fetch(`${BASE_URL}/api/v1/shows/episode-subtitles/?id_episode=${config.id}`).then(res => res.json());
}
async function getAccessInfo(config) {
let url = '';
if (config.type === 'movie') {
@ -88,7 +103,9 @@ async function getAccessToken(config) {
const data = await fetch(url).then((d) => d.json());
const token = data?.data?.accessToken;
if (token) return token;
const subtitles = data?.data?.subtitles;
if (token) return { token, subtitles };
return "Invalid type provided in config";
}
@ -153,11 +170,11 @@ async function getStreamUrl(slug, type, season, episode) {
slug: slug,
id: id,
type: type,
});
});
return { url: videoUrl }
return { url: videoUrl.videoUrl, subtitles: videoUrl.subs };
}
const lookMovie = { findContent, getStreamUrl, getEpisodes };
export default lookMovie;
export default lookMovie;

8
src/views/Movie.js
View File

@ -56,10 +56,10 @@ export function MovieView(props) {
}
setLoading(true);
getStreamUrl(streamData.slug, streamData.type, streamData.source, season, episode)
.then(({url}) => {
if (cancel) return;
.then(({url, subtitles}) => {
if (cancel) return;
if (streamData.source === "lookmovie") streamData.subtitles = subtitles;
setStreamUrl(url)
setLoading(false);
})
@ -131,7 +131,7 @@ export function MovieView(props) {
Season {season}: Episode {episode}
</Title> : undefined}
<VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} videoRef={videoRef} startTime={startTime} />
<VideoElement streamUrl={streamUrl} loading={loading} setProgress={setProgress} videoRef={videoRef} startTime={startTime} streamData={streamData} />
{streamData.type === "show" ?
<EpisodeSelector

9
src/views/Search.js
View File

@ -54,13 +54,17 @@ export function SearchView() {
}
let realUrl = '';
let subtitles = []
if (type === "movie") {
const { url } = await getStreamUrl(slug, type, source);
const { url, subtitles: subs } = await getStreamUrl(slug, type, source);
if (url === '') {
return fail(`Not found: ${title}`)
}
realUrl = url;
subtitles = subs
}
setProgress(maxSteps);
@ -72,7 +76,8 @@ export function SearchView() {
episodes,
slug,
source,
year
year,
subtitles
})
setText(`Streaming...`)
navigate("movie")