recloudstream/website
1
0
Fork 0
mirror of https://github.com/recloudstream/website.git synced 2024-08-15 03:18:45 +00:00
Code Issues Projects Releases Packages Wiki Activity

improve tv support

Browse source
This commit is contained in:
Cloudburst 2022-08-27 10:45:32 +02:00
parent 006cff303e
commit 711823a824
9 changed files with 126 additions and 51 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

16
gatsby-browser.js
View file

@ -1 +1,15 @@
require("prism-themes/themes/prism-dracula.min.css")
import { init } from '@noriginmedia/norigin-spatial-navigation';
require("prism-themes/themes/prism-dracula.min.css")
if (window !== undefined) {
init({
visualDebug: false
});
// window.addEventListener("keypress", (evt) => {
// if (evt.keyCode === 461) {
// window.history.go(-1)
// }
// })
}

20
package-lock.json generated
View file

@ -8,6 +8,7 @@
"name": "recloudstream",
"version": "1.0.0",
"dependencies": {
"@noriginmedia/norigin-spatial-navigation": "^1.0.5",
"daisyui": "^2.24.0",
"gatsby": "^4.21.1",
"gatsby-plugin-html-attributes": "^1.0.5",
@ -2917,6 +2918,17 @@
"node": ">= 8"
}
},
"node_modules/@noriginmedia/norigin-spatial-navigation": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@noriginmedia/norigin-spatial-navigation/-/norigin-spatial-navigation-1.0.5.tgz",
"integrity": "sha512-sLdigBBihZUtlexumYRrPkqg8P8SaSp+ZsLDEfDXdySP+/NK+uGCkRl7vi/GboTfDghdKt88KhwOa8sjvTuu5Q==",
"dependencies": {
"lodash": "^4.17.21"
},
"peerDependencies": {
"react": ">=16.8.0"
}
},
"node_modules/@parcel/bundler-default": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.6.2.tgz",
@ -22844,6 +22856,14 @@
"fastq": "^1.6.0"
}
},
"@noriginmedia/norigin-spatial-navigation": {
"version": "1.0.5",
"resolved": "https://registry.npmjs.org/@noriginmedia/norigin-spatial-navigation/-/norigin-spatial-navigation-1.0.5.tgz",
"integrity": "sha512-sLdigBBihZUtlexumYRrPkqg8P8SaSp+ZsLDEfDXdySP+/NK+uGCkRl7vi/GboTfDghdKt88KhwOa8sjvTuu5Q==",
"requires": {
"lodash": "^4.17.21"
}
},
"@parcel/bundler-default": {
"version": "2.6.2",
"resolved": "https://registry.npmjs.org/@parcel/bundler-default/-/bundler-default-2.6.2.tgz",

1
package.json
View file

@ -15,6 +15,7 @@
"clean": "gatsby clean"
},
"dependencies": {
"@noriginmedia/norigin-spatial-navigation": "^1.0.5",
"daisyui": "^2.24.0",
"gatsby": "^4.21.1",
"gatsby-plugin-html-attributes": "^1.0.5",

46
src/components/cards/repo.jsx
View file

@ -1,14 +1,9 @@
import React, { useState, useEffect, useRef } from "react";
import React, { useState, useEffect } from "react";
import CompatBtn from "../compatbtn";
const RepoCard = ({ url, isFirst }) => {
const [data, setData] = useState(null)
const firstButton = useRef(null)
useEffect(() => {
if (!isFirst) return;
console.log({firstButton})
firstButton.current?.focus()
}, [firstButton])
useEffect(() => {
fetch(url)
@ -30,21 +25,26 @@ const RepoCard = ({ url, isFirst }) => {
</p>
<div className="card-actions justify-end">
<div className="btn-group">
<button ref={firstButton} className="btn btn-primary" onClick={() => {
window.open(`cloudstreamrepo://${url.replace(/^https?:\/\//, "")}`)
}}>Install</button>
<button className="btn" onClick={() => {
if (navigator.clipboard) {
navigator.clipboard.writeText(url);
} else {
var tempInput = document.createElement("input");
tempInput.value = url;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
}}>Copy URL</button>
<CompatBtn
autoFocus={isFirst}
group={true}
className="btn-primary"
href={`cloudstreamrepo://${url.replace(/^https?:\/\//, "")}`}
target="_blank"
>Install</CompatBtn>
<CompatBtn group={true}
onClick={() => {
if (navigator.clipboard) {
navigator.clipboard.writeText(url);
} else {
var tempInput = document.createElement("input");
tempInput.value = url;
document.body.appendChild(tempInput);
tempInput.select();
document.execCommand("copy");
document.body.removeChild(tempInput);
}
}}>Copy URL</CompatBtn>
</div>
</div>
</div>

47
src/components/compatbtn.jsx Normal file
View file

@ -0,0 +1,47 @@
import React, { useEffect } from "react";
import { useFocusable } from '@noriginmedia/norigin-spatial-navigation';
import { Link, navigate } from "gatsby";
function CompatBtn({autoFocus, href, onClick, group, target, children, className, ...props}) {
const { ref, focused, focusSelf} = useFocusable();
useEffect(() => {
if (!autoFocus) return;
focusSelf()
}, [focusSelf])
if (onClick) href = "#!"
if (focused && ref.current) {
ref.current?.focus()
}
if (window) {
window.addEventListener("keyup", (ev) => {
if (!focused) return;
if (document.activeElement !== ref.current) return;
if (ev.key === "Enter" || ev.key === " ") {
ref.current?.click()
}
})
}
if (target !== "_blank" && !group && !onClick) {
return <Link to={href} className={`btn ${className||""}`} ref={ref} {...props}>{children}</Link>
} else if (!group && !onClick) {
return <a href={href} target="_blank" className={`btn ${className||""}`} ref={ref} {...props}>{children}</a>
} else {
return <button className={`btn ${className||""}`} ref={ref} {...props} onClick={() => {
if (onClick) {
onClick()
} else if (target === "_blank") {
window.open(href)
} else {
navigate(href)
}
}}>{children}</button>
}
}
export default CompatBtn

5
src/components/navbar/button.jsx
View file

@ -1,11 +1,12 @@
import React from "react"
import { Link } from "gatsby"
const Button = ({url, children, name}) => (
<span className="tooltip tooltip-bottom before:text-xs before:content-[attr(data-tip)]" data-tip={name}>
<div className="flex-none items-center">
<a className="btn btn-ghost drawer-button btn-square text-xl" href={url || "#!"}>
<Link className="btn btn-ghost drawer-button btn-square text-xl" to={url || "#!"}>
{children}
</a>
</Link>
</div>
</span>
)

12
src/pages/404.js
View file

@ -1,24 +1,18 @@
import React, {useRef, useEffect} from "react"
import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"
import bgImage from "../media/phones.png"
import { Link } from "gatsby"
import CompatBtn from "../components/compatbtn"
const NotFoundPage = () => {
const firstBtn = useRef(null)
useEffect(() => {
firstBtn.current.focus()
}, [firstBtn])
return (
<Layout>
<Hero bg={bgImage}>
<h1 className="mb-5 text-5xl font-bold">Not found</h1>
<p className="mb-5 text-lg">Sorry 😔. We couldn’t find what you were looking for.</p>
<Link ref={firstBtn} className="btn btn-primary" to="/">Home</Link>
<CompatBtn autoFocus={true} className="btn-primary" href="/">Home</CompatBtn>
</Hero>
</Layout>
)

13
src/pages/index.js
View file

@ -1,26 +1,21 @@
import React, {useEffect, useRef} from "react"
import React from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"
import CompatBtn from "../components/compatbtn"
import bgImage from "../media/phones.png"
import { Link } from "gatsby"
const IndexPage = () => {
const firstBtn = useRef(null)
useEffect(() => {
firstBtn.current.focus()
}, [firstBtn])
return <Layout>
<Hero bg={bgImage}>
<h1 className="mb-5 text-5xl font-bold">Hello there</h1>
<p className="mb-5 text-lg">Cloudstream is an Android app for streaming and downloading Movies, TV-Series and Anime.</p>
<div className="flex justify-center w-full mb-5">
<Link ref={firstBtn} className="btn btn-primary" to="/install">Install</Link>
<CompatBtn autoFocus={true} className="btn-primary" href="/install">Install</CompatBtn>
<div className="divider divider-horizontal" />
<Link className="btn btn-primary" to="/repos">Repositories</Link>
<CompatBtn className="btn-primary" href="/repos">Repositories</CompatBtn>
</div>
<Link to="/docs" className="link">Documentation</Link>
</Hero>

17
src/pages/install.js
View file

@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react"
import Layout from "../components/layout"
import Hero from "../components/hero"
import CompatBtn from "../components/compatbtn"
import bgImage from "../media/phones.png"
@ -54,14 +55,16 @@ const InstallPage = () => {
<h1 className="mb-5 text-5xl font-bold">Installation</h1>
{(data != null) &&
<div className="flex flex-col items-center gap-3">{
data.btns.map(it => {
data.btns.map((it, idx) => {
return <div className="btn-group" key={JSON.stringify(it)}>
<button className={"btn " + (it.pre?'btn-secondary':'btn-primary')} onClick={() => {
window.open(it.apk.browser_download_url)
}}>Download {it.tag}</button>
<button className="btn"onClick={() => {
window.open(it.url)
}}>Release notes</button>
<CompatBtn group={true} autoFocus={idx === 0}
className={it.pre?'btn-secondary':'btn-primary'}
href={it.apk.browser_download_url}
target="_blank">Download {it.tag}</CompatBtn>
<CompatBtn
group={true}
href={it.url}
target="_blank">Release notes</CompatBtn>
</div>
})}
</div>