Merge pull request #80 from SolidLabResearch/master

Mobile version fix and QR code invite
SolidLabResearch · Oct 23, 2024 · ab0ce85 · ab0ce85
2 parents 8361684 + 8ff19e9
commit ab0ce85
Show file tree

Hide file tree

Showing 15 changed files with 174 additions and 96 deletions.
diff --git a/solid-watchparty/package-lock.json b/solid-watchparty/package-lock.json
diff --git a/solid-watchparty/package.json b/solid-watchparty/package.json
@@ -31,6 +31,7 @@
     "react-full-screen": "^1.1.1",
     "react-icons": "^5.0.1",
     "react-player": "^2.15.1",
+    "react-qr-code": "^2.0.15",
     "react-router-dom": "^6.18.0",
     "tailwind-merge": "^2.2.2",
     "tailwindcss-animate": "^1.0.7",

diff --git a/solid-watchparty/src/components/PeopleMenuModal.jsx b/solid-watchparty/src/components/PeopleMenuModal.jsx
@@ -3,6 +3,7 @@ import { useEffect, useState, useContext } from 'react';
 import { useSession, } from "@inrupt/solid-ui-react";
 import { FaUserCircle, FaCheck } from "react-icons/fa";
 import propTypes from 'prop-types';
+import QRCode from "react-qr-code";
 
 /* component imports */
 import SWModal from '../components/SWModal';
@@ -68,7 +69,6 @@ function PersonCard({person}) {
                 <p>{person.name}</p>
             </div>
             <div className="flex gap-3 items-center">
-                <p className="rgb-1">Allow seeing my messages:</p>
                 <SWSwitch enabled={enabled} onSwitch={onSwitch} disabled={isMyCard} isLoading={isLoading}/>
             </div>
         </div>
@@ -78,7 +78,7 @@ PersonCard.propTypes = {
     person: propTypes.object.isRequired,
 }
 
-function RequestingPersonCard({person, roomUrl, removeFromPeople}) {
+function WaitingPersonCard({person, roomUrl, removeFromPeople}) {
     const sessionContext = useSession();
     const [isLoading, setIsLoading] = useState(false);
 
@@ -115,7 +115,7 @@ function RequestingPersonCard({person, roomUrl, removeFromPeople}) {
         </div>
     );
 }
-RequestingPersonCard.propTypes = {
+WaitingPersonCard.propTypes = {
     person:             propTypes.object.isRequired,
     roomUrl:            propTypes.string.isRequired,
     removeFromPeople:   propTypes.func.isRequired,
@@ -146,16 +146,18 @@ function InRoomPeople({roomUrl}) {
         return (<LoadingCard/>);
     }
     return (
-        <div className="overflow-auto grid grid-cols-2 auto-rows-min gap-4 h-[90%]">
+        <div className="overflow-auto grid auto-rows-min gap-4 h-[90%]">
+            <p className="rgb-1">Allow seeing my messages:</p>
             {people.map((person, index) => <PersonCard person={person} key={index}/>)}
         </div>
     );
 }
+
 InRoomPeople.propTypes = {
     roomUrl: propTypes.string.isRequired,
 }
 
-function RequestingPeople({roomUrl}) {
+function WaitingPeople({roomUrl}) {
     const sessionContext = useSession();
     const [isLoading, setIsLoading] = useState(true);
     const [people, setPeople] = useState([]);
@@ -184,15 +186,32 @@ function RequestingPeople({roomUrl}) {
         return (<LoadingCard/>);
     }
     return (
-        <div className="overflow-auto grid grid-cols-2 auto-rows-min gap-4 h-[90%]">
+        <div className="overflow-auto grid auto-rows-min gap-4 h-[90%]">
             {people.map((person, index) => (
-                <RequestingPersonCard person={person} key={index} roomUrl={roomUrl}
+                <WaitingPersonCard person={person} key={index} roomUrl={roomUrl}
                                       removeFromPeople={removeFromPeople}/>
             ))}
         </div>
     );
 }
-RequestingPeople.propTypes = {
+WaitingPeople.propTypes = {
+    roomUrl: propTypes.string.isRequired,
+}
+
+function InvitePeople() {
+    console.log(window.location.href);
+    return (
+        <div className="h-full justify-center">
+            <QRCode
+                size={256}
+                style={{ maxHeight: "90%", height: "auto", maxWidth: "90%", width: "100%", margin: "auto" }}
+                value={window.location.href}
+                viewBox={`0 0 256 256`}
+            />
+        </div>
+    );
+}
+InvitePeople.propTypes = {
     roomUrl: propTypes.string.isRequired,
 }
 
@@ -207,18 +226,22 @@ function PeopleMenuModal({setModalIsShown, roomUrl}) {
         case "in-room":
             body = <InRoomPeople roomUrl={roomUrl}/>;
             break;
-        case "requesting":
-            body = <RequestingPeople roomUrl={roomUrl}/>;
+        case "waiting":
+            body = <WaitingPeople roomUrl={roomUrl}/>;
+            break;
+        case "invite":
+            body = <InvitePeople roomUrl={roomUrl}/>;
             break;
     }
 
     return (
-        <SWModal className="rgb-bg-2 h-2/3 p-12 z-10 w-1/2 sw-border" setIsShown={setModalIsShown}>
+        <SWModal className="rgb-bg-2 h-2/3 p-12 z-10 w-1/2 sw-border width-mobile padding-full-mobile" setIsShown={setModalIsShown}>
             <div className="mb-6 flex items-center justify-between">
                 <p className="sw-fs-2 sw-fw-1">People</p>
                 <MenuBar>
                     <MenuItem onClick={() => setTab("in-room")}>In Room</MenuItem>
-                    <MenuItem onClick={() => setTab("requesting")}>Requesting</MenuItem>
+                    <MenuItem onClick={() => setTab("waiting")}>Waiting</MenuItem>
+                    <MenuItem onClick={() => setTab("invite")}>Invite</MenuItem>
                 </MenuBar>
             </div>
             {body}

diff --git a/solid-watchparty/src/components/SWChatComponent.jsx b/solid-watchparty/src/components/SWChatComponent.jsx
@@ -99,46 +99,46 @@ function SWChatComponent({roomUrl, joined}) {
         setInput('');
     }
 
-    let pageContent = <div/>
-        if (state.isLoading) {
-            pageContent = (
-                <div className="w-full h-full flex justify-center items-center">
-                    <div className="flex flex-col items-center">
-                        <SWLoadingIcon className="w-6 h-6 mb-3"/>
-                    </div>
+    let pageContent = <div></div>
+    if (state.isLoading) {
+        pageContent = (
+            <div className="w-full h-full flex justify-center items-center">
+                <div className="flex flex-col items-center">
+                    <SWLoadingIcon className="w-6 h-6 mb-3"/>
                 </div>
-            );
-        } else if (!state.hasAccess) {
-            pageContent = (
-                <div className="w-full h-full flex justify-center items-center">
-                    <p className="rgb-2 sw-fs-2">
-                        Failed to load chat <span className="sw-emoji">😢</span>
-                    </p>
-                </div>
-            );
-        } else {
-            pageContent = (
-                <>
-                    <SWAutoScrollDiv className="overflow-y-auto overflow-x-auto mb-2 shrink">
-                        {messages.map((message) => {
-                            const sender = userNames[message.messageBoxUrl];
-                            return (
-                                <SWMessageComponent message={{...message, sender}} key={message.key}/>
-                            );
-                        })}
-                    </SWAutoScrollDiv>
-                    <form autoComplete="off" className="grow-0 flex flex-between items-center" onSubmit={submitMessage}>
-                        <input id="msgInput" className="px-2 h-10 rgb-bg-1 sw-border w-full border-solid"
-                            onChange={(e) => setInput(parseMessage(e.target.value))}
-                            value={input} type='text'/>
-                        <button className="sw-btn hidden"></button>
-                    </form>
-                </>
-            );
-        }
+            </div>
+        );
+    } else if (!state.hasAccess) {
+        pageContent = (
+            <div className="w-full h-full flex justify-center items-center">
+                <p className="rgb-2 sw-fs-2">
+                    Failed to load chat <span className="sw-emoji">😢</span>
+                </p>
+            </div>
+        );
+    } else {
+        pageContent = (
+            <>
+                <SWAutoScrollDiv className="overflow-y-auto overflow-x-auto mb-2 shrink">
+                    {messages.map((message) => {
+                        const sender = userNames[message.messageBoxUrl];
+                        return (
+                            <SWMessageComponent message={{...message, sender}} key={message.key}/>
+                        );
+                    })}
+                </SWAutoScrollDiv>
+                <form autoComplete="off" className="grow-0 flex flex-between items-center" onSubmit={submitMessage}>
+                    <input id="msgInput" className="px-2 h-10 rgb-bg-1 sw-border w-full border-solid"
+                        onChange={(e) => setInput(parseMessage(e.target.value))}
+                        value={input} type='text'/>
+                    <button className="sw-btn hidden"></button>
+                </form>
+            </>
+        );
+    }
 
     return (
-        <div className="w-1/3 rgb-bg-2 sw-border p-3 flex flex-col justify-between">
+        <div className="w-1/3 rgb-bg-2 sw-border p-3 flex flex-col justify-between width-mobile height-40vh-mobile">
             {pageContent}
         </div>
     );

diff --git a/solid-watchparty/src/components/SWModalInputBar.jsx b/solid-watchparty/src/components/SWModalInputBar.jsx
@@ -59,10 +59,10 @@ function SWModalInputBar({setModalIsShown, title, f, args}) {
         : (error) ? "sw-input-error"
         : "sw-input";
     return (
-        <SWModal className="p-12 z-10 w-1/2" setIsShown={setModalIsShown}>
-            <form onSubmit={onSubmit} className={`p-24 flex w-full items-center justify-between gap-6 border ${inputStyle}`}>
+        <SWModal className="p-12 z-10 w-1/2 width-mobile" setIsShown={setModalIsShown}>
+            <form onSubmit={onSubmit} className={`p-24 flex w-full items-center justify-between gap-1 border ${inputStyle}`}>
                 <label className="w-fit sw-fw-1 rgb-1">{title}:</label>
-                <input className="flex grow" ref={inputRef} onChange={() => setError("")} disabled={isLoading} />
+                <input className="flex-auto" ref={inputRef} onChange={() => setError("")} disabled={isLoading} />
                 <button className={`sw-btn w-fit`} type="submit">
                     { isLoading ? <SWLoadingIcon className="w-4"/> : <FaChevronRight className="w-4 h-4"/> }
                 </button>

diff --git a/solid-watchparty/src/components/SWNavbar.jsx b/solid-watchparty/src/components/SWNavbar.jsx
@@ -32,16 +32,13 @@ function SWNavbar()
     }
 
     return (
-        <div className="w-full flex p-8 grow-0">
-            <div className="flex items-center basis-1/3">
-                <label className="sw-fw-1 text-left">solid-watchparty-v0</label>
-            </div>
-            <div className="flex justify-center basis-1/3">
+        <div className="w-full flex p-8">
+            <div className="flex basis-1/2">
                 <p className="flex sw-fw-1 justify-center items-center sw-text-gradient">
                     solid-watchparty
                 </p>
             </div>
-            <div className="flex items-center basis-1/3 justify-end">
+            <div className="flex items-center basis-2/2 ml-auto">
                 <div className="flex gap-4 items-center sw-fw-1">
                     { (!sessionContext.sessionRequestInProgress) ? <p>{username}</p> : <LoadingIcon/> }
                     <FaUserCircle className="sw-fw-1 w-6 h-6"/>

diff --git a/solid-watchparty/src/components/SWRoomPoster.jsx b/solid-watchparty/src/components/SWRoomPoster.jsx
@@ -57,7 +57,7 @@ function DeleteRoomModal({room, setIsShown, onDelete}) {
     }
 
     return (
-        <SWModal className="z-10 w-1/3" setIsShown={setIsShown}>
+        <SWModal className="z-10 w-1/3 width-mobile" setIsShown={setIsShown}>
             <div className={`h-48 rgb-bg-1 flex w-full items-center justify-between gap-6 sw-border${error ? "-error" : ""}`}>
                 { isLoading ? (
                     <div className="w-full flex justify-center">

diff --git a/solid-watchparty/src/components/SWVideoPlayer.jsx b/solid-watchparty/src/components/SWVideoPlayer.jsx
@@ -160,7 +160,8 @@ function SWVideoPlayer({roomUrl}) {
                 <ReactPlayer url={watchingEvent?.videoUrl} width="100%" height="100%" controls={false}
                              playing={lastPause?.isPlaying} config={playerConfig} ref={videoRef}
                              onDuration={(duration) => setDuration(duration)}
-                             onProgress={(state) => setProgress(state.playedSeconds)} />
+                             onProgress={(state) => setProgress(state.playedSeconds)}
+                             playsinline={true} />
             </FullScreen>
         </div>
     );

diff --git a/solid-watchparty/src/components/SettingsModal.jsx b/solid-watchparty/src/components/SettingsModal.jsx
@@ -69,7 +69,7 @@ function SettingsModal({setModalIsShown, roomUrl}) {
     }, [room]);
 
     return (
-        <SWModal className="relative rgb-bg-2 h-fit p-12 z-10 w-1/2 sw-border" setIsShown={setModalIsShown}>
+        <SWModal className="relative rgb-bg-2 h-fit p-12 z-10 w-1/2 sw-border width-mobile" setIsShown={setModalIsShown}>
             <div className="mb-6 flex items-center justify-between">
                 <p className="sw-fs-2 sw-fw-1">Settings</p>
             </div>

diff --git a/solid-watchparty/src/components/StartWatchingEventModal.jsx b/solid-watchparty/src/components/StartWatchingEventModal.jsx
@@ -85,7 +85,7 @@ Tab2.propTypes = {
 
 function StartWatchingEventModal({setModalIsShown, roomUrl}) {
     return (
-        <SWModal className="rgb-bg-2 p-12 sw-border z-10 w-1/2" setIsShown={setModalIsShown}>
+        <SWModal className="rgb-bg-2 p-12 sw-border z-10 w-1/2 width-mobile padding-full-mobile" setIsShown={setModalIsShown}>
             <p className="sw-fs-2 sw-fw-1 my-4">Start new movie/clip</p>
             <div className="flex w-full gap-3">
                 <Tab2 className="w-full rgb-bg-1 p-4 sw-border" setModalIsShown={setModalIsShown} roomUrl={roomUrl}/>

diff --git a/solid-watchparty/src/pages/LandingPage.jsx b/solid-watchparty/src/pages/LandingPage.jsx
@@ -36,11 +36,10 @@ export default function LandingPage()
     return (
         <>
         <div className={
-            "flex grow justify-between items-baseline grid grid-cols-3"
-                + " top-0 left-0 fixed w-full px-12 py-6 z-10"
+            "fixed flex grow justify-between items-baseline grid grid-cols-2"
+                + " top-0 left-0 w-full px-12 py-6 z-10"
                 + " rgb-bg-1"
             }>
-            <h1 className="sw-fw-1 mb-5">Solid Watch Party</h1>
             <div className="flex justify-center">
                 <MenuBar>
                     <MenuItem href="#home">Home</MenuItem>
@@ -63,18 +62,18 @@ export default function LandingPage()
                         Watching videos with friends and familiy in a private and secure manner
                     </p>
                 </Banner>
-                <Banner name="about" className="px-44 bg-[#111]">
-                    <div className="flex justify-center items-center w-full">
-                        <img src={BannerImg} className="w-1/2 p-12"/>
-                        <div className="text-justify w-1/3">
+                <Banner name="about" className="px-44 bg-[#111] padding-mobile">
+                    <div className="flex justify-center items-center w-full flex-mobile">
+                        <img src={BannerImg} className="w-1/2 p-12 width-mobile"/>
+                        <div className="text-justify w-1/3 width-mobile text-center-mobile">
                             <p className="sw-fs-1 sw-fw-1 my-4 bg-gradient-to-r from-indigo-500 to-[#d9a12A] bg-clip-text text-[#fff5] inline-block">About</p>
                             <p className="sw-fs-2 sw-fw-1 my-4">Solid Watch Party is a platform that allows you to watch videos with your friends and family in a private and secure manner. You can create a room, invite your friends and family, watch videos together and chat with each other. The platform is built on top of Solid, a decentralized web platform that gives you control over your data.</p>
                         </div>
                     </div>
                 </Banner>
-                <Banner name="solid" className="px-44 rgb-bg-solid">
-                    <div className="flex justify-center items-center w-full">
-                        <div className="text-justify w-1/3">
+                <Banner name="solid" className="px-44 rgb-bg-solid padding-mobile">
+                    <div className="flex justify-center items-center w-full flex-mobile">
+                        <div className="text-justify w-1/3 width-mobile text-center-mobile">
                             <p className="sw-fs-1 sw-fw-1 my-4">Solid</p>
                             <p className="sw-fs-2 sw-fw-1 my-4">
                                 Solid is a technology that lets individuals and groups store their data securely in decentralized data stores called Pods. Pods are like secure web servers for data. When data is stored in a Pod, its owners control which people and applications can access it.
@@ -83,10 +82,10 @@ export default function LandingPage()
                                 <button className="sw-btn sw-btn-2 my-4">Create your own pod</button>
                             </a>
                         </div>
-                        <img src="https://solidproject.org/assets/img/solid-pod-tour.svg" className="w-1/2 p-40"/>
+                        <img src="https://solidproject.org/assets/img/solid-pod-tour.svg" className="w-1/2 p-40 width-mobile padding-mobile"/>
                     </div>
                 </Banner>
-                <div className="p-44">
+                <div className="p-44 padding-mobile">
                     <div className="flex justify-center items-center">
                         <p className="sw-fs-2 sw-fw-1 my-4">© 2024 IDLab</p>
                     </div>

diff --git a/solid-watchparty/src/pages/LoginPage.jsx b/solid-watchparty/src/pages/LoginPage.jsx
@@ -40,7 +40,7 @@ export default function LoginPage()
             <div className="w-full flex justify-center items-center">
                 <div className="rounded">
                     <div className="h-screen flex flex-col justify-center sw-bg-gradient-2 items-center">
-                        <div className="w-1/3">
+                        <div className="w-1/3 width-mobile padding-mobile">
                             <h1 className="sw-fs-2 sw-fw-1 sw-text-gradient">Login to solid-watchparty</h1>
                             <div className="my-6">
                                 <p className="sw-fs-4 sw-fw-1 my-2 rgb-2 flex items-center gap-2">
@@ -76,8 +76,8 @@ export default function LoginPage()
                             </div>
                         </div>
                     </div>
-                    <div className="h-screen flex justify-center">
-                        <div className="flex flex-col justify-center gap-12 w-1/3">
+                    <div className="h-screen flex justify-center height-mobile">
+                        <div className="flex flex-col justify-center gap-12 w-1/3 width-mobile padding-mobile">
                             <a name="faq"></a>
                             <h1 className="sw-fs-2 sw-fw-1">FAQ</h1>
                             <div>