saulteafarmer/plebdevs
1
0
Fork 0
mirror of https://github.com/AustinKelsay/plebdevs.git synced 2025-06-06 01:02:04 +00:00
Code Issues Packages Projects Releases Wiki Activity

paid video flow with digital ocean cdn is working, just need to scope it by purchase / subscription now

Browse Source
This commit is contained in:
austinkelsay 2024-09-09 15:44:18 -05:00
parent 808a22dc09
commit 185c96bf9b
10 changed files with 44 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/banner/HeroBanner.js
View File

@ -39,16 +39,16 @@ const HeroBanner = () => {
quality={100}
className='opacity-70'
/>
<div className="max-mob:min-w-full max-tab:min-w-[38%] min-w-[35%] absolute text-center text-white text-xl h-full flex flex-col justify-evenly">
<p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>Learn how to code</p>
<p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>
<div className="w-[75vw] sm:w-[65vw] md:w-[45vw] lg:w-[45vw] xl:w-[45vw] absolute text-center text-white text-xl h-full flex flex-col justify-evenly">
<p className='text-2xl md:text-4xl lg:text-5xl xl:text-5xl'>Learn how to code</p>
<p className='text-2xl md:text-4xl lg:text-5xl xl:text-5xl'>
Build{' '}
<span className={`inline-block w-[50%] ${isFlipping ? 'flip-enter-active' : ''} ${getColorClass(options[currentOption])}`}>
{options[currentOption]}
</span>
{' '}Apps
</p>
<p className='text-xl md:text-3xl lg:text-4xl xl:text-5xl'>Become a developer</p>
<p className='text-2xl md:text-4xl lg:text-5xl xl:text-5xl'>Become a developer</p>
</div>
</div>

2
src/components/content/carousels/CoursesCarousel.js
View File

@ -50,7 +50,7 @@ export default function CoursesCarousel() {
return (
<>
<h2 className="ml-[6%] mt-4">Courses</h2>
<h3 className="ml-[6%] mt-4">Courses</h3>
<div className={"min-h-[384px]"}>
<Carousel
value={coursesLoading || !processedCourses.length ? [{}, {}, {}] : [...processedCourses]}

2
src/components/content/carousels/ResourcesCarousel.js
View File

@ -48,7 +48,7 @@ export default function ResourcesCarousel() {
return (
<>
<h2 className="ml-[6%] mt-4">Resources</h2>
<h3 className="ml-[6%] mt-4">Resources</h3>
<Carousel
value={resourcesLoading || !processedResources.length ? [{}, {}, {}] : [...processedResources]}
numVisible={2}

2
src/components/content/carousels/WorkshopsCarousel.js
View File

@ -49,7 +49,7 @@ export default function WorkshopsCarousel() {
return (
<>
<h2 className="ml-[6%] mt-4">Workshops</h2>
<h3 className="ml-[6%] mt-4">Workshops</h3>
<Carousel
value={workshopsLoading || !processedWorkshops.length ? [{}, {}, {}] : [...processedWorkshops]}
numVisible={2}

5
src/components/forms/WorkshopForm.js
View File

@ -59,6 +59,11 @@ const WorkshopForm = ({ draft = null }) => {
const videoId = videoUrl.split('/').pop();
embedCode = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><iframe src="https://player.vimeo.com/video/${videoId}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" allowfullscreen></iframe></div>`;
}
else if (videoUrl.includes('.mp4') || videoUrl.includes('.mov') || videoUrl.includes('.avi') || videoUrl.includes('.wmv') || videoUrl.includes('.flv') || videoUrl.includes('.webm')) {
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000";
const videoEmbed = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(videoUrl)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
embedCode = videoEmbed;
}
// Add more conditions here for other video services
const userResponse = await axios.get(`/api/users/${user.pubkey}`);

5
src/components/sidebar/Sidebar.js
View File

@ -111,9 +111,10 @@ const Sidebar = () => {
<div onClick={() => session ? signOut() : router.push('/auth/signin')} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg ${isActive('/auth/signin') ? 'bg-gray-700' : ''}`}>
<i className={`pi ${session ? 'pi-sign-out' : 'pi-sign-in'} pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{session ? 'Logout' : 'Login'}</p>
</div>
<div onClick={toggleSidebar} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
{/* todo sidebar expand / contract */}
{/* <div onClick={toggleSidebar} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
<i className={`pi pi-chevron-left pl-5 text-sm`} /> <p className="pl-2 rounded-md font-bold text-lg">{isExpanded ? 'close' : 'open'}</p>
</div>
</div> */}
{/* todo: have to add this extra button to push the sidebar to the right space but it doesnt seem to cause any negative side effects? */}
<div onClick={signOut} className={`w-full flex flex-row items-center cursor-pointer py-2 my-2 hover:bg-gray-700 rounded-lg`}>
<i className="pi pi-sign-out pl-5 text-sm" /> <p className="pl-2 rounded-md font-bold text-lg">Logout</p>

20
src/pages/_app.js
View File

@ -24,19 +24,19 @@ const queryClient = new QueryClient()
export default function MyApp({
Component, pageProps: { session, ...pageProps }
}) {
const [sidebarExpanded, setSidebarExpanded] = useState(true);
// const [sidebarExpanded, setSidebarExpanded] = useState(true);
useEffect(() => {
const handleSidebarToggle = (event) => {
setSidebarExpanded(event.detail.isExpanded);
};
// useEffect(() => {
// const handleSidebarToggle = (event) => {
// setSidebarExpanded(event.detail.isExpanded);
// };
window.addEventListener('sidebarToggle', handleSidebarToggle);
// window.addEventListener('sidebarToggle', handleSidebarToggle);
return () => {
window.removeEventListener('sidebarToggle', handleSidebarToggle);
};
}, []);
// return () => {
// window.removeEventListener('sidebarToggle', handleSidebarToggle);
// };
// }, []);
return (
<PrimeReactProvider>

2
src/pages/api/auth/[...nextauth].js
View File

@ -143,7 +143,7 @@ export const authOptions = {
},
pages: {
signIn: "/auth/signin",
},
}
};
export default NextAuth(authOptions);

6
src/pages/api/get-video-url.js
View File

@ -19,8 +19,6 @@ export default async function handler(req, res) {
return res.status(401).json({ error: "Unauthorized" })
}
console.log("Session:", session)
const { videoKey } = req.query
if (!videoKey) {
@ -34,10 +32,10 @@ export default async function handler(req, res) {
})
const signedUrl = await getSignedUrl(s3Client, command, {
expiresIn: 10, // URL expires in 10 seconds
expiresIn: 3600, // URL expires in 1 hour
})
res.status(200).json({ url: signedUrl })
res.redirect(signedUrl)
} catch (error) {
console.error("Error generating signed URL:", error)
res.status(500).json({ error: "Failed to generate video URL" })

19
src/pages/draft/[slug]/index.js
View File

@ -201,6 +201,18 @@ export default function Draft() {
encryptedContent = await nip04.encrypt(process.env.NEXT_PUBLIC_APP_PRIV_KEY, process.env.NEXT_PUBLIC_APP_PUBLIC_KEY, draft.content);
}
if (draft?.content.includes('.mp4') || draft?.content.includes('.mov') || draft?.content.includes('.avi') || draft?.content.includes('.wmv') || draft?.content.includes('.flv') || draft?.content.includes('.webm')) {
// todo update this for dev and prod
const baseUrl = process.env.NEXT_PUBLIC_API_URL || "http://localhost:3000"
const videoEmbed = `<div style="position:relative;padding-bottom:56.25%;height:0;overflow:hidden;max-width:100%;"><video src="${baseUrl}/api/get-video-url?videoKey=${encodeURIComponent(draft.content)}" style="position:absolute;top:0;left:0;width:100%;height:100%;border:0;" controls></video></div>`;
if (draft?.price) {
const encryptedVideoUrl = await nip04.encrypt(process.env.NEXT_PUBLIC_APP_PRIV_KEY, process.env.NEXT_PUBLIC_APP_PUBLIC_KEY, videoEmbed);
draft.content = encryptedVideoUrl;
} else {
draft.content = videoEmbed;
}
}
event.kind = draft?.price ? 30402 : 30023;
event.content = draft?.price ? encryptedContent : draft.content;
event.created_at = Math.floor(Date.now() / 1000);
@ -232,9 +244,8 @@ export default function Draft() {
<div className='w-[75vw] mx-auto flex flex-row items-start justify-between'>
<div className='flex flex-col items-start max-w-[45vw] max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
<div className='pt-2 flex flex-row justify-start w-full'>
{/* List out topics */}
{draft?.topics && draft.topics.map((topic, index) => {
if (topic === "plebdevs") return;
if (topic === "") return;
return (
<Tag className='mr-2 text-white' key={index} value={topic}></Tag>
)
@ -302,7 +313,9 @@ export default function Draft() {
</div>
<div className='w-[75vw] mx-auto mt-12 p-12 border-t-2 border-gray-300 max-tab:p-0 max-mob:p-0 max-tab:max-w-[100vw] max-mob:max-w-[100vw]'>
{
draft?.content && <MDDisplay className='p-4 rounded-lg' source={draft.content} />
(
draft?.content && <MDDisplay className='p-4 rounded-lg' source={draft.content} />
)
}
</div>
</div>