basic frontend and backend functionality. Need to test with actual livestream

client/src/EditModals/EditModal.tsx

@@ -10,6 +10,7 @@ interface EditModalProps {
   form: JSX.Element;
   entity?: MusicianProps | GroupObj | EventSeriesObj;
   error?: string;
+  livestream_id?: string;
 }
 
 function EditModal(props: EditModalProps) {

client/src/Forms/Bio/BioForm.tsx

@@ -11,10 +11,12 @@ interface EditBioFormProps {
   setGroup?: React.Dispatch<React.SetStateAction<GroupObj | undefined>>;
   setMusician?: React.Dispatch<React.SetStateAction<MusicianObj>>;
   token: string;
+  livestream_id?: string;
 }
 
 function EditBioForm(props: EditBioFormProps) {
   const [formBio, setFormBio] = useState<string>(props.entity.bio);
+  const [formLivestreamId, setFormLivestreamId] = useState<string | undefined>(props.livestream_id)
   const [canSubmit, setCanSubmit] = useState<boolean>(false);
   const [error, setError] = useState<string>("");
 
@@ -23,6 +25,11 @@ function EditBioForm(props: EditBioFormProps) {
     setCanSubmit(true);
   };
 
+  const handleLivestreamChange = (event: React.ChangeEvent<HTMLTextAreaElement>) => {
+    setFormLivestreamId(event.target.value);
+    setCanSubmit(true);
+  }
+
   const handleSubmit = async (event: React.FormEvent) => {
     event.preventDefault();
     if (props.entity instanceof MusicianObj) {
@@ -53,7 +60,6 @@ function EditBioForm(props: EditBioFormProps) {
         }
       })
       .catch((error) => {
-        console.error(error);
         setError("Failed to update bio: " + error.response.data.detail);
       });
   };
@@ -62,7 +68,8 @@ function EditBioForm(props: EditBioFormProps) {
     accessToken: string,
     group: GroupObj,
   ): Promise<void> => {
-    patchGroup(group.id, formBio, group.name, accessToken)
+    const livestream_id = formLivestreamId ? formLivestreamId : "";
+    patchGroup(group.id, formBio, livestream_id, group.name, accessToken)
       .then((patchedGroup) => {
         if (props.setGroup) {
           props.setGroup(patchedGroup);
@@ -86,6 +93,26 @@ function EditBioForm(props: EditBioFormProps) {
 
   return (
     <Form onSubmit={handleSubmit}>
+      {/* need to account for empty string, which is falsy but the field should still show */}
+      {props.livestream_id != undefined && (
+        <Form.Group controlId="formLivestreamId">
+          <p className="text-muted">
+            A livestream id is the part of a youtube url following "v=".
+            For example, "ncyl7cTU9k8" but without the quotations.
+            Don't mess it up. <br></br>
+            To remove an embedded livestream, just clear this field and submit the form.
+          </p>
+          <Form.Label>Livestream ID:</Form.Label>
+          <Form.Control
+            as="textarea"
+            value={formLivestreamId}
+            rows={1}
+            onChange={handleLivestreamChange}
+            placeholder="ncyl7cTU9k8"
+          />
+
+        </Form.Group>
+      )}
       <Form.Group controlId="formBio">
         <Form.Label>Bio</Form.Label>
         <Form.Control

client/src/Group/Group.tsx

@@ -5,16 +5,19 @@ import { useState } from "react";
 import EditBioForm from "../Forms/Bio/BioForm";
 import { faPen } from "@fortawesome/free-solid-svg-icons";
 import EditButton from "../Buttons/EditButton/EditButton";
+import LivestreamPlayer from "../LivestreamPlayer/LivestreamPlayer";
 
 export class GroupObj {
   id: number;
   name: string;
   bio: string;
+  livestream_id: string;
 
-  constructor(id: number, name: string, bio: string) {
+  constructor(id: number, name: string, bio: string, livestream_id: string) {
     this.id = id;
     this.name = name;
     this.bio = bio;
+    this.livestream_id = livestream_id;
   }
 }
 
@@ -39,7 +42,7 @@ function Group(props: GroupProps) {
       <EditButton
         setModalShow={setModalShow}
         faIcon={faPen}
-        actionName=" Group Bio"
+        actionName=" Group"
       />
       <EditModal
         show={modalShow}
@@ -53,6 +56,7 @@ function Group(props: GroupProps) {
             onBioChange={props.onBioChange}
             setGroup={props.setGroup}
             token={props.token}
+            livestream_id={group.livestream_id}
           />
         }
       />
@@ -67,6 +71,9 @@ function Group(props: GroupProps) {
             <Card.Title>
               <h1>{group.name}</h1>
             </Card.Title>
+            {group.livestream_id && (
+              <LivestreamPlayer livestreamId={group.livestream_id} />
+            )}
             {props.token && EditIcon}
             <Card.Text className="lead group-bio">{group.bio}</Card.Text>
           </Card.Body>

client/src/LivestreamPlayer/LivestreamPlayer.tsx

@@ -0,0 +1,25 @@
+import { Container } from "react-bootstrap";
+
+interface LivestreamPlayerProps {
+  livestreamId: string;
+}
+
+const LivestreamPlayer = (props: LivestreamPlayerProps) => {
+  const iframeSrc = `https://www.youtube.com/embed/${props.livestreamId}`;
+
+  return (
+    <Container className="d-flex justify-content-center my-3">
+      <div className="ratio ratio-16x9">
+        <iframe
+          src={iframeSrc}
+          title="YouTube Livestream"
+          allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; fullscreen"
+          allowFullScreen
+          className="rounded border"
+        ></iframe>
+      </div>
+    </Container>
+  );
+};
+
+export default LivestreamPlayer;

client/src/api.tsx

@@ -38,6 +38,7 @@ export const getRoot = async (): Promise<TheGrapefruitsDuoAPI> => {
       response.data.group.id,
       response.data.group.name,
       response.data.group.bio,
+      response.data.group.livestream_id,
     ),
     response.data.musicians.map(
       (musician: MusicianObj) =>
@@ -104,7 +105,12 @@ export const postUser = async (token: string): Promise<UserObj> => {
 
 export const getGroup = async (): Promise<GroupObj> => {
   const response = await api.get("/group/");
-  return new GroupObj(response.data.id, response.data.name, response.data.bio);
+  return new GroupObj(
+    response.data.id,
+    response.data.name,
+    response.data.bio,
+    response.data.livestream_id,
+  );
 };
 
 export const getMusicians = async (): Promise<MusicianObj[]> => {
@@ -143,15 +149,21 @@ export const patchMusician = async (
 export const patchGroup = async (
   id: number,
   bio: string,
+  livestream_id: string,
   name: string,
   user_token: string,
 ): Promise<GroupObj> => {
   const response = await api.patch(
     `/group/`,
-    { id, bio, name },
+    { id, bio, livestream_id, name },
     { headers: { Authorization: `Bearer ${user_token}` } },
   );
-  return new GroupObj(response.data.id, response.data.name, response.data.bio);
+  return new GroupObj(
+    response.data.id,
+    response.data.name,
+    response.data.bio,
+    response.data.livestream_id,
+  );
 };
 
 export const postHeadshot = async (

server/.gitignore

@@ -177,3 +177,6 @@ pyrightconfig.json
 
 *.log
 .vscode/
+
+# mysql dumps
+*.dump

server/app/controllers/controller.py

@@ -197,16 +197,20 @@ class MainController:
         """
         return self.group_controller.get_group()
 
-    async def update_group_bio(
+    async def update_group(
-        self, bio: str, token: HTTPAuthorizationCredentials
+        self, group: Group, token: HTTPAuthorizationCredentials
     ) -> Group:
         """
         Updates the group's bio and returns the updated group object.
-
-        :param str bio: The new bio for the group
-        :param HTTPAuthorizationCredentials token: The OAuth token
-        :return Group: The updated group object which is suitable for a response body
         """
         _, sub = self.oauth_token.email_and_sub(token)
         self.user_controller.get_user_by_sub(sub)
-        return self.group_controller.update_group_bio(bio)
+        self.group_controller.update_livestream(group.livestream_id)
+        return self.group_controller.update_group_bio(group.bio)
+
+    async def update_livestream(
+        self, livestream_id: str, token: HTTPAuthorizationCredentials
+    ) -> Group:
+        _, sub = self.oauth_token.email_and_sub(token)
+        self.user_controller.get_user_by_sub(sub)
+        return self.group_controller.update_livestream(livestream_id)

server/app/controllers/group.py

@@ -57,3 +57,13 @@ class GroupController(BaseController):
                 detail=f"Error updating group bio: {e}",
             )
         return self.get_group()
+
+    def update_livestream(self, livestream_id: str) -> Group:
+        try:
+            self.group_queries.update_livestream(livestream_id)
+        except Exception as e:
+            raise HTTPException(
+                status_code=status.HTTP_500_INTERNAL_SERVER_ERROR,
+                detail=f"Error updating livestram: {e}",
+            )
+        return self.get_group()

server/app/db/group.py

@@ -34,3 +34,15 @@ class GroupQueries(BaseQueries):
         cursor.execute(query, (bio,))
         conn.commit()
         self.close_cursor_and_conn(cursor, conn)
+
+    def update_livestream(self, livestream_id: str) -> None:
+        cursor, conn = self.get_cursor_and_conn()
+        query = f"""-- sql
+            UPDATE {self.table} SET livestream_id = %s WHERE id = 1
+            """
+        cursor.execute(query, (livestream_id,))
+        conn.commit()
+        self.close_cursor_and_conn(cursor, conn)
+
+    def delete_livestream(self) -> None:
+        self.update_livestream(livestream_id="")

server/app/models/group.py

@@ -1,7 +1,9 @@
 from pydantic import BaseModel
+from typing import Optional
 
 
 class Group(BaseModel):
     name: str
     bio: str
-    id: int | None = None
+    livestream_id: str = ""
+    id: Optional[int] = None

server/app/routers/group.py

@@ -24,4 +24,5 @@ async def update_group(
 ) -> Group:
     """Updates the group bio, but requires the entire group object to be sent in the request body.
     Requires authentication."""
-    return await controller.update_group_bio(group.bio, token)
+    ic(group)
+    return await controller.update_group(group, token)

server/tests/controllers/test_main_controller.py

@@ -158,7 +158,7 @@ async def test_get_group():
 async def test_update_group_bio():
     """Tests the update_group_bio method."""
     bio = "A new bio"
-    await controller.update_group_bio(bio, mock_token)
+    await controller.update_group(bio, mock_token)
     MagicMock.assert_called_with(mock_oauth_token.email_and_sub, mock_token)
     MagicMock.assert_called(mock_user_controller.get_user_by_sub)
     MagicMock.assert_called(mock_group_controller.update_group_bio)