Skip to content

Commit

Permalink
add mixed feelings palyer back in for upcoming episode
Browse files Browse the repository at this point in the history
  • Loading branch information
@antiantivirus
antiantivirus committed Jan 24, 2025
1 parent 083ec31 commit 3055803
Show file tree
Hide file tree
Showing 4 changed files with 141 additions and 122 deletions.
250 changes: 134 additions & 116 deletions components/livePlayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import Image from "next/image";
import { AiOutlineCalendar } from "react-icons/ai";
import { useRouter } from "next/router";
import { Arrow } from "../icons/arrow";
import MixedFeelingsPlayer from "./mixedFeelingsPlayer";

const BroadcastingIndicator = ({
status,
Expand Down Expand Up @@ -135,55 +136,138 @@ export default function LivePlayer() {
}

return (
<section className={playerWrapperClassNames}>
<div
className={`h-12 sm:h-16 flex items-center flex-1 truncate lg:border-0 lg:min-w-[50%] ${
ch2IsOnline && "border-b-2 border-white"
}`}
>
{isOnline && (
<>
<>
<section className={playerWrapperClassNames}>
<div
className={`h-12 sm:h-16 flex items-center flex-1 truncate lg:border-0 lg:min-w-[50%] ${
ch2IsOnline && "border-b-2 border-white"
}`}
>
{isOnline && (
<>
<button
className="pl-4 sm:pl-8 pr-3 sm:pr-5 h-full grow-0 flex items-center gap-4"
onClick={isPlaying == 1 ? pause : play}
aria-label={
isPlaying == 1
? "Pause Live Broadcast"
: "Play Live Broadcast"
}
>
{ch2IsOnline && (
<span className="font-medium text-small bg-white h-6 w-6 text-black rounded-sm">
1
</span>
)}
<div className={`h-6 w-6 ${!ch2IsOnline && "sm:h-8 sm:w-8"}`}>
{isPlaying == 1 ? <Pause /> : <Play />}
</div>
</button>
</>
)}

{!isLoading && !error && scheduleData?.liveNow?.title && (
<Link
className="flex-1 truncate mt-0.5 relative"
href={
scheduleData?.liveNow?.link ? scheduleData.liveNow.link : ""
}
>
<Marquee
key={scheduleData?.liveNow.title + ch2IsOnline}
className="-mr-14"
text={
<span className="pr-8">{scheduleData?.liveNow.title}</span>
}
speed={ch2IsOnline ? 0.2 : 0.25}
/>
{/* <span className="absolute left-0 top-0.5 font-medium text-small flex items-center justify-center pt-0.5 bg-white h-8 w-8 text-black rounded-sm">
1
</span> */}
</Link>
)}

{!isLoading && (
<>
{hasBack && isSchedulePage ? (
<button
className="lg:hidden flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
onClick={() => router.back()}
>
{isSchedulePage ? (
<Arrow
colour="white"
size={24}
className="h-6 w-[24px] rotate-180 "
/>
) : (
<AiOutlineCalendar />
)}
<span className="sr-only lg:hidden">Back</span>
</button>
) : (
<Link
className="lg:hidden flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
href={isSchedulePage ? "/" : "/schedule"}
>
{isSchedulePage ? (
<Arrow
colour="white"
size={24}
className="h-6 w-[24px] rotate-180 "
/>
) : (
<AiOutlineCalendar className="h-[22px] w-[22px]" />
)}
<span className="sr-only lg:hidden">
{isSchedulePage ? "Back" : "Schedule"}
</span>
</Link>
)}
</>
)}
</div>

{ch2IsOnline && (
<div className="h-12 sm:h-16 flex items-center flex-1 truncate">
<div className="w-0.5 bg-white h-full !ml-0 hidden lg:block"></div>
<button
className="pl-4 sm:pl-8 pr-3 sm:pr-5 h-full grow-0 flex items-center gap-4"
onClick={isPlaying == 1 ? pause : play}
className="grow-0 pl-4 sm:pl-8 pr-3 sm:pr-5 lg:px-5 h-full flex gap-4 items-center"
onClick={isPlaying == 2 ? pause : play2}
aria-label={
isPlaying == 1 ? "Pause Live Broadcast" : "Play Live Broadcast"
isPlaying == 2 ? "Pause Live Broadcast" : "Play Live Broadcast"
}
>
{ch2IsOnline && (
<span className="font-medium text-small bg-white h-6 w-6 text-black rounded-sm">
1
</span>
)}
<div className={`h-6 w-6 ${!ch2IsOnline && "sm:h-8 sm:w-8"}`}>
{isPlaying == 1 ? <Pause /> : <Play />}
<span className="font-medium text-small bg-white h-6 w-6 text-black rounded-sm">
2
</span>
<div className="h-6 w-6">
{isPlaying == 2 ? <Pause /> : <Play />}
</div>
</button>
</>
)}

{!isLoading && !error && scheduleData?.liveNow?.title && (
<Link
className="flex-1 truncate mt-0.5 relative"
href={scheduleData?.liveNow?.link ? scheduleData.liveNow.link : ""}
>
<Marquee
key={scheduleData?.liveNow.title + ch2IsOnline}
className="-mr-14"
text={<span className="pr-8">{scheduleData?.liveNow.title}</span>}
speed={ch2IsOnline ? 0.2 : 0.25}
/>
{/* <span className="absolute left-0 top-0.5 font-medium text-small flex items-center justify-center pt-0.5 bg-white h-8 w-8 text-black rounded-sm">
1
</span> */}
</Link>
{!isLoading && !error && scheduleData?.liveNow?.title && (
<span className="flex-1 truncate mt-0.5 relative">
<Marquee
key={scheduleData?.ch2.liveNow + ch2IsOnline}
text={
<span className="pr-8">{scheduleData?.ch2.liveNow}</span>
}
speed={0.3}
/>
{/* <span className="absolute left-0 top-0.5 font-medium text-small flex items-center justify-center pt-0.5 bg-white h-8 w-8 text-black rounded-sm">
2
</span> */}
</span>
)}
</div>
)}

{!isLoading && (
<>
{hasBack && isSchedulePage ? (
<button
className="lg:hidden flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
className="hidden lg:flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
onClick={() => router.back()}
>
{isSchedulePage ? (
Expand All @@ -199,7 +283,7 @@ export default function LivePlayer() {
</button>
) : (
<Link
className="lg:hidden flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
className="hidden lg:flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
href={isSchedulePage ? "/" : "/schedule"}
>
{isSchedulePage ? (
Expand All @@ -209,7 +293,7 @@ export default function LivePlayer() {
className="h-6 w-[24px] rotate-180 "
/>
) : (
<AiOutlineCalendar className="h-[22px] w-[22px]" />
<AiOutlineCalendar />
)}
<span className="sr-only lg:hidden">
{isSchedulePage ? "Back" : "Schedule"}
Expand All @@ -218,86 +302,20 @@ export default function LivePlayer() {
)}
</>
)}
</div>

{ch2IsOnline && (
<div className="h-12 sm:h-16 flex items-center flex-1 truncate">
<div className="w-0.5 bg-white h-full !ml-0 hidden lg:block"></div>
<button
className="grow-0 pl-4 sm:pl-8 pr-3 sm:pr-5 lg:px-5 h-full flex gap-4 items-center"
onClick={isPlaying == 2 ? pause : play2}
aria-label={
isPlaying == 2 ? "Pause Live Broadcast" : "Play Live Broadcast"
}
>
<span className="font-medium text-small bg-white h-6 w-6 text-black rounded-sm">
2
</span>
<div className="h-6 w-6">
{isPlaying == 2 ? <Pause /> : <Play />}
</div>
</button>

{!isLoading && !error && scheduleData?.liveNow?.title && (
<span className="flex-1 truncate mt-0.5 relative">
<Marquee
key={scheduleData?.ch2.liveNow + ch2IsOnline}
text={<span className="pr-8">{scheduleData?.ch2.liveNow}</span>}
speed={0.3}
/>
{/* <span className="absolute left-0 top-0.5 font-medium text-small flex items-center justify-center pt-0.5 bg-white h-8 w-8 text-black rounded-sm">
2
</span> */}
</span>
)}
</div>
)}

{!isLoading && (
<>
{hasBack && isSchedulePage ? (
<button
className="hidden lg:flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
onClick={() => router.back()}
>
{isSchedulePage ? (
<Arrow
colour="white"
size={24}
className="h-6 w-[24px] rotate-180 "
/>
) : (
<AiOutlineCalendar />
)}
<span className="sr-only lg:hidden">Back</span>
</button>
) : (
<Link
className="hidden lg:flex pt-0.5 pb-0.5 sm:pt-4 sm:pb-4 px-4 !ml-0 self-stretch items-center bg-black border-white border-l-2 border-r-0 text-white"
href={isSchedulePage ? "/" : "/schedule"}
>
{isSchedulePage ? (
<Arrow
colour="white"
size={24}
className="h-6 w-[24px] rotate-180 "
/>
) : (
<AiOutlineCalendar />
)}
<span className="sr-only lg:hidden">
{isSchedulePage ? "Back" : "Schedule"}
</span>
</Link>
)}
</>
<audio hidden id="refuge-live-player" preload="none" ref={player}>
<source ref={source} type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</section>
{scheduleData?.liveNow.isMixedFeelings && (
<MixedFeelingsPlayer
isPlaying={isPlaying == 1}
onPlay={isPlaying ? pause : play}
slug={scheduleData?.liveNow.slug}
/>
)}

<audio hidden id="refuge-live-player" preload="none" ref={player}>
<source ref={source} type="audio/mpeg" />
Your browser does not support the audio element.
</audio>
</section>
</>
);
}

Expand Down
12 changes: 6 additions & 6 deletions components/mixedFeelingsPlayer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ export default function MixedFeelingsPlayer({
return (
<div
ref={ref}
className={`flex flex-col lg:flex-row items-stretch bg-[#94B5FA] text-black border-b-2 border-black ${
className={`flex flex-col lg:flex-row items-stretch bg-[#A5FDD1] text-black border-b-2 border-black ${
isChatroom && "hidden lg:flex"
}`}
>
Expand Down Expand Up @@ -80,7 +80,7 @@ export default function MixedFeelingsPlayer({
}}
/> */}
<iframe
src="https://lvpr.tv?v=a643duatfcmq9w8j&lowLatency=true&autoplay=true&muted=true"
src="https://lvpr.tv?v=80102glf4yhnwkmd&lowLatency=true&autoplay=true&muted=true"
width="100%"
height="auto"
frameBorder="0"
Expand Down Expand Up @@ -128,10 +128,10 @@ export default function MixedFeelingsPlayer({
>
<div className="hidden lg:block">
<p className="lg:text-[1.7rem] xl:text-base">
Mixed Feelings is expanding the radio experience. Refuge Worldwide
is proud to present a new series of radio shows embracing the
diverse talents and stories of artists from the disabled
community.
Refuge Worldwide is excited to expand on the next phase of the
Mixed Feelings project with a new radio series, further exploring
accessibility in the arts, embracing the diverse talents of
disabled and d/Deaf artists in Berlin and beyond.
</p>
</div>
<div className="flex justify-between items-center">
Expand Down
1 change: 1 addition & 0 deletions pages/api/schedule.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,6 +86,7 @@ export default async function handler(
liveNowContentful && liveNowContentful.slug
? liveNowContentful.slug
: null,
isMixedFeelings: liveNowTitle().includes("Dana Cermane"),
};

const scheduleData = {
Expand Down
Binary file modified public/images/mixed-feelings.jpg
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit 3055803

Please sign in to comment.