mirror of
https://github.com/sussy-code/smov.git
synced 2024-12-20 14:37:43 +01:00
Merge pull request #29 from mansoor-roeen-glitch/master
Added subtitles accessibility for Lookmovie
This commit is contained in:
commit
14d82dc558
6 changed files with 73 additions and 18 deletions
|
@ -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;
|
||||
|
|
|
@ -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>
|
||||
<span className="year">({props.year})</span>
|
||||
<div className="titleWrapper">
|
||||
<div className="titleText">
|
||||
{props.title}
|
||||
|
||||
<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,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>
|
||||
)
|
||||
|
|
|
@ -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;
|
||||
|
|
|
@ -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
|
||||
|
|
|
@ -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")
|
||||
|
|
Loading…
Reference in a new issue