From 16ee8d316b08bbd8dd4c2063056be6d9261106bf Mon Sep 17 00:00:00 2001 From: maartenvandenbrande Date: Wed, 23 Oct 2024 17:25:42 +0200 Subject: [PATCH] Fix mobile version and add a QR invite system --- solid-watchparty/package-lock.json | 18 +++++ solid-watchparty/package.json | 1 + .../src/components/PeopleMenuModal.jsx | 47 +++++++++--- .../src/components/SWChatComponent.jsx | 74 +++++++++---------- .../src/components/SWModalInputBar.jsx | 6 +- solid-watchparty/src/components/SWNavbar.jsx | 9 +-- .../src/components/SWRoomPoster.jsx | 2 +- .../src/components/SWVideoPlayer.jsx | 3 +- .../src/components/SettingsModal.jsx | 2 +- .../components/StartWatchingEventModal.jsx | 2 +- solid-watchparty/src/pages/LandingPage.jsx | 23 +++--- solid-watchparty/src/pages/LoginPage.jsx | 6 +- solid-watchparty/src/pages/MenuPage.jsx | 9 +-- solid-watchparty/src/pages/WatchPage.jsx | 33 +++++---- solid-watchparty/src/styles/general.css | 35 +++++++++ 15 files changed, 174 insertions(+), 96 deletions(-) diff --git a/solid-watchparty/package-lock.json b/solid-watchparty/package-lock.json index 694e75f..a208870 100644 --- a/solid-watchparty/package-lock.json +++ b/solid-watchparty/package-lock.json @@ -27,6 +27,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", @@ -17164,6 +17165,11 @@ "node": ">=6" } }, + "node_modules/qr.js": { + "version": "0.0.0", + "resolved": "https://registry.npmjs.org/qr.js/-/qr.js-0.0.0.tgz", + "integrity": "sha512-c4iYnWb+k2E+vYpRimHqSu575b1/wKl4XFeJGpFmrJQz5I88v9aY2czh7s0w36srfCM1sXgC/xpoJz5dJfq+OQ==" + }, "node_modules/qs": { "version": "6.12.1", "resolved": "https://registry.npmjs.org/qs/-/qs-6.12.1.tgz", @@ -17500,6 +17506,18 @@ "react": ">=16.6.0" } }, + "node_modules/react-qr-code": { + "version": "2.0.15", + "resolved": "https://registry.npmjs.org/react-qr-code/-/react-qr-code-2.0.15.tgz", + "integrity": "sha512-MkZcjEXqVKqXEIMVE0mbcGgDpkfSdd8zhuzXEl9QzYeNcw8Hq2oVIzDLWuZN2PQBwM5PWjc2S31K8Q1UbcFMfw==", + "dependencies": { + "prop-types": "^15.8.1", + "qr.js": "0.0.0" + }, + "peerDependencies": { + "react": "*" + } + }, "node_modules/react-refresh": { "version": "0.14.0", "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.14.0.tgz", diff --git a/solid-watchparty/package.json b/solid-watchparty/package.json index ab6e72f..4f2ab72 100644 --- 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 index c49f970..b79e3bb 100644 --- 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}) {

{person.name}

-

Allow seeing my messages:

@@ -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}) { ); } -RequestingPersonCard.propTypes = { +WaitingPersonCard.propTypes = { person: propTypes.object.isRequired, roomUrl: propTypes.string.isRequired, removeFromPeople: propTypes.func.isRequired, @@ -146,16 +146,18 @@ function InRoomPeople({roomUrl}) { return (); } return ( -
+
+

Allow seeing my messages:

{people.map((person, index) => )}
); } + 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 (); } return ( -
+
{people.map((person, index) => ( - ))}
); } -RequestingPeople.propTypes = { +WaitingPeople.propTypes = { + roomUrl: propTypes.string.isRequired, +} + +function InvitePeople() { + console.log(window.location.href); + return ( +
+ +
+ ); +} +InvitePeople.propTypes = { roomUrl: propTypes.string.isRequired, } @@ -207,18 +226,22 @@ function PeopleMenuModal({setModalIsShown, roomUrl}) { case "in-room": body = ; break; - case "requesting": - body = ; + case "waiting": + body = ; + break; + case "invite": + body = ; break; } return ( - +

People

setTab("in-room")}>In Room - setTab("requesting")}>Requesting + setTab("waiting")}>Waiting + setTab("invite")}>Invite
{body} diff --git a/solid-watchparty/src/components/SWChatComponent.jsx b/solid-watchparty/src/components/SWChatComponent.jsx index 972dc60..57c57af 100644 --- 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 =
- if (state.isLoading) { - pageContent = ( -
-
- -
+ let pageContent =
+ if (state.isLoading) { + pageContent = ( +
+
+
- ); - } else if (!state.hasAccess) { - pageContent = ( -
-

- Failed to load chat 😢 -

-
- ); - } else { - pageContent = ( - <> - - {messages.map((message) => { - const sender = userNames[message.messageBoxUrl]; - return ( - - ); - })} - -
- setInput(parseMessage(e.target.value))} - value={input} type='text'/> - -
- - ); - } +
+ ); + } else if (!state.hasAccess) { + pageContent = ( +
+

+ Failed to load chat 😢 +

+
+ ); + } else { + pageContent = ( + <> + + {messages.map((message) => { + const sender = userNames[message.messageBoxUrl]; + return ( + + ); + })} + +
+ setInput(parseMessage(e.target.value))} + value={input} type='text'/> + +
+ + ); + } return ( -
+
{pageContent}
); diff --git a/solid-watchparty/src/components/SWModalInputBar.jsx b/solid-watchparty/src/components/SWModalInputBar.jsx index 4d9b0bb..94ce8e2 100644 --- 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 ( - -
+ + - setError("")} disabled={isLoading} /> + setError("")} disabled={isLoading} /> diff --git a/solid-watchparty/src/components/SWNavbar.jsx b/solid-watchparty/src/components/SWNavbar.jsx index 8f7b55d..6a9363a 100644 --- a/solid-watchparty/src/components/SWNavbar.jsx +++ b/solid-watchparty/src/components/SWNavbar.jsx @@ -32,16 +32,13 @@ function SWNavbar() } return ( -
-
- -
-
+
+

solid-watchparty

-
+
{ (!sessionContext.sessionRequestInProgress) ?

{username}

: } diff --git a/solid-watchparty/src/components/SWRoomPoster.jsx b/solid-watchparty/src/components/SWRoomPoster.jsx index a2701a3..620c452 100644 --- a/solid-watchparty/src/components/SWRoomPoster.jsx +++ b/solid-watchparty/src/components/SWRoomPoster.jsx @@ -57,7 +57,7 @@ function DeleteRoomModal({room, setIsShown, onDelete}) { } return ( - +
{ isLoading ? (
diff --git a/solid-watchparty/src/components/SWVideoPlayer.jsx b/solid-watchparty/src/components/SWVideoPlayer.jsx index f4c2fbc..5d94853 100644 --- a/solid-watchparty/src/components/SWVideoPlayer.jsx +++ b/solid-watchparty/src/components/SWVideoPlayer.jsx @@ -160,7 +160,8 @@ function SWVideoPlayer({roomUrl}) { setDuration(duration)} - onProgress={(state) => setProgress(state.playedSeconds)} /> + onProgress={(state) => setProgress(state.playedSeconds)} + playsinline={true} />
); diff --git a/solid-watchparty/src/components/SettingsModal.jsx b/solid-watchparty/src/components/SettingsModal.jsx index d6206f0..f0b8524 100644 --- a/solid-watchparty/src/components/SettingsModal.jsx +++ b/solid-watchparty/src/components/SettingsModal.jsx @@ -69,7 +69,7 @@ function SettingsModal({setModalIsShown, roomUrl}) { }, [room]); return ( - +

Settings

diff --git a/solid-watchparty/src/components/StartWatchingEventModal.jsx b/solid-watchparty/src/components/StartWatchingEventModal.jsx index 5a72169..37da333 100644 --- 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 ( - +

Start new movie/clip

diff --git a/solid-watchparty/src/pages/LandingPage.jsx b/solid-watchparty/src/pages/LandingPage.jsx index 6584030..67be88a 100644 --- a/solid-watchparty/src/pages/LandingPage.jsx +++ b/solid-watchparty/src/pages/LandingPage.jsx @@ -36,11 +36,10 @@ export default function LandingPage() return ( <>
-

Solid Watch Party

Home @@ -63,18 +62,18 @@ export default function LandingPage() Watching videos with friends and familiy in a private and secure manner

- -
- -
+ +
+ +

About

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.

 - -
-
+ +
+

Solid

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()

- +
-
+

© 2024 IDLab

diff --git a/solid-watchparty/src/pages/LoginPage.jsx b/solid-watchparty/src/pages/LoginPage.jsx index a060fcc..1ab7034 100644 --- a/solid-watchparty/src/pages/LoginPage.jsx +++ b/solid-watchparty/src/pages/LoginPage.jsx @@ -40,7 +40,7 @@ export default function LoginPage()
-
+

Login to solid-watchparty

@@ -76,8 +76,8 @@ export default function LoginPage()

-
-
+
+

FAQ

diff --git a/solid-watchparty/src/pages/MenuPage.jsx b/solid-watchparty/src/pages/MenuPage.jsx index d6f6a8f..7876308 100644 --- a/solid-watchparty/src/pages/MenuPage.jsx +++ b/solid-watchparty/src/pages/MenuPage.jsx @@ -141,10 +141,9 @@ function MenuPage() } return ( - -
-
-
+ +
+
setSearchTerm(e.target.value)}/>
) : ( -
+
{ filteredRooms.map((room, i) => ( ))} diff --git a/solid-watchparty/src/pages/WatchPage.jsx b/solid-watchparty/src/pages/WatchPage.jsx index b5746c8..6dfc605 100644 --- a/solid-watchparty/src/pages/WatchPage.jsx +++ b/solid-watchparty/src/pages/WatchPage.jsx @@ -141,35 +141,40 @@ function WatchPage() { ); } else { body = (<> -
+
-
+
-
-
- -

{room.name}

-
-
+
+
+
- -
-
-
+
+
diff --git a/solid-watchparty/src/styles/general.css b/solid-watchparty/src/styles/general.css index 81a2f10..1645c48 100644 --- a/solid-watchparty/src/styles/general.css +++ b/solid-watchparty/src/styles/general.css @@ -264,3 +264,38 @@ a:hover @apply from-[#000]; @apply to-[#131419]; } + +@media (max-width: 1000px) { + .flex-mobile { + display: flex; + flex-direction: column; + } + + .width-mobile { + width: 100%; + } + + .height-40vh-mobile { + height: 40vh; + } + + .height-mobile { + height: auto; + } + + .padding-mobile { + padding: 0 20px; + } + + .padding-full-mobile { + padding: 20px 20px; + } + + .text-center-mobile { + text-align: center; + } + + .justify-center-mobile { + justify-content: center; + } +}