diff --git a/client/src/App.css b/client/src/App.css index dfd559e..4d08e3a 100644 --- a/client/src/App.css +++ b/client/src/App.css @@ -30,6 +30,11 @@ body { } } +section { + margin-top: 10em; + margin-bottom: 10em; +} + .btn-primary { background-color: var(--group-info-color); border-color: var(--group-info-color); diff --git a/client/src/Group/Group.tsx b/client/src/Group/Group.tsx index c9320fe..0476492 100644 --- a/client/src/Group/Group.tsx +++ b/client/src/Group/Group.tsx @@ -1,23 +1,32 @@ -import { Card, Container } from "react-bootstrap"; +import { Card, Container, Image } from "react-bootstrap"; import "./Group.css"; import EditModal from "../EditModals/EditModal"; -import { useState } from "react"; +import { useEffect, 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"; +import cld from "../Cld/CloudinaryConfig"; export class GroupObj { id: number; name: string; bio: string; livestream_id: string; + livestream_program_cld_id?: string; - constructor(id: number, name: string, bio: string, livestream_id: string) { + constructor( + id: number, + name: string, + bio: string, + livestream_id: string, + livestream_program_cld_id?: string, + ) { this.id = id; this.name = name; this.bio = bio; this.livestream_id = livestream_id; + this.livestream_program_cld_id = livestream_program_cld_id; } } @@ -30,10 +39,23 @@ interface GroupProps { function Group(props: GroupProps) { const [modalShow, setModalShow] = useState(false); - if (!props.group) { + const [programId, setProgramId] = useState(undefined); + const [programUrl, setProgramUrl] = useState(undefined); + + const group = props.group; + + useEffect(() => { + if (group) { + setProgramId(group.livestream_program_cld_id); + } + if (programId) { + setProgramUrl(cld.image(programId).toURL()); + } + }, [group, programId]); + + if (!group) { return null; } - const group = props.group; const EditTitle = `Edit ${group.name}'s Bio`; @@ -65,7 +87,7 @@ function Group(props: GroupProps) { return (
- + @@ -74,6 +96,17 @@ function Group(props: GroupProps) { {group.livestream_id && ( )} + {group.livestream_id && group.livestream_program_cld_id && ( + + + A PDF of the program fo the current livestream + + + )} {props.token && EditIcon} {group.bio} diff --git a/client/src/Musicians/Musicians.css b/client/src/Musicians/Musicians.css index b739877..70d70d4 100644 --- a/client/src/Musicians/Musicians.css +++ b/client/src/Musicians/Musicians.css @@ -6,5 +6,4 @@ #musicians { padding-top: 70px; margin-top: -70px; - margin-bottom: 400px; } diff --git a/client/src/Series/SeriesList.css b/client/src/Series/SeriesList.css index b6b6273..5132527 100644 --- a/client/src/Series/SeriesList.css +++ b/client/src/Series/SeriesList.css @@ -15,5 +15,4 @@ hr { #events { padding-top: 70px; margin-top: -70px; - margin-bottom: 400px; } diff --git a/client/src/api.tsx b/client/src/api.tsx index f9ffdcf..f28cc0e 100644 --- a/client/src/api.tsx +++ b/client/src/api.tsx @@ -39,6 +39,7 @@ export const getRoot = async (): Promise => { response.data.group.name, response.data.group.bio, response.data.group.livestream_id, + response.data.group.livestream_program_cld_id, ), response.data.musicians.map( (musician: MusicianObj) => @@ -110,6 +111,7 @@ export const getGroup = async (): Promise => { response.data.name, response.data.bio, response.data.livestream_id, + response.data.livestream_program_cld_id, ); }; @@ -152,10 +154,11 @@ export const patchGroup = async ( livestream_id: string, name: string, user_token: string, + livestream_program_cld_id?: string, ): Promise => { const response = await api.patch( `/group/`, - { id, bio, livestream_id, name }, + { id, bio, livestream_id, name, livestream_program_cld_id }, { headers: { Authorization: `Bearer ${user_token}` } }, ); return new GroupObj( @@ -163,6 +166,7 @@ export const patchGroup = async ( response.data.name, response.data.bio, response.data.livestream_id, + response.data.livestream_program_cld_id, ); }; diff --git a/server/app/models/group.py b/server/app/models/group.py index 9aab010..ef770d4 100644 --- a/server/app/models/group.py +++ b/server/app/models/group.py @@ -6,4 +6,5 @@ class Group(BaseModel): name: str bio: str livestream_id: str = "" + livestream_program_cld_id: Optional[str] = None # not a FK! references a cloudinary ID id: Optional[int] = None