olaven
/
nrss
1
0
Fork 0
Code Issues 6 Pull Requests Packages Projects Releases Wiki Activity

feat: Add open in podcast app button (and minor stuff) #29

Merged
timharek merged 5 commits from feature-open-in-podcast-app into main 2024-04-12 12:56:03 +00:00
Conversation 0 Commits 5 Files Changed 3 +18 -4
2 changed files with 18 additions and 4 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files
Showing only changes of commit 3c3a847668 - Show all commits

7
components/SeriesCard.tsx
View File

@ -1,6 +1,7 @@
import CopyButton from "../islands/CopyButton.tsx"; import CopyButton from "../islands/CopyButton.tsx";
import { SearchResult } from "../lib/nrk/nrk.ts"; import { SearchResult } from "../lib/nrk/nrk.ts";
import { ButtonLink } from "./Button.tsx"; import { ButtonLink } from "./Button.tsx";
import IconPodcast from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/brand-apple-podcast.tsx";
export default function SeriesCard(props: { serie: SearchResult; origin: string }) { export default function SeriesCard(props: { serie: SearchResult; origin: string }) {
const feedUrl = new URL(`/api/feeds/${props.serie.seriesId}`, props.origin); const feedUrl = new URL(`/api/feeds/${props.serie.seriesId}`, props.origin);
@ -11,11 +12,11 @@ export default function SeriesCard(props: { serie: SearchResult; origin: string
<h3 className="text-xl font-semibold">{props.serie.title}</h3> <h3 className="text-xl font-semibold">{props.serie.title}</h3>
<p className="text-md">{props.serie.description}</p> <p className="text-md">{props.serie.description}</p>
<img src={image.uri} width={image.width} alt="" /> <img src={image.uri} width={image.width} alt="" />
<ButtonLink href={`podcast:${feedUrl.toString()}`} className="block"> <ButtonLink href={`podcast:${feedUrl.toString()}`} className="block flex items-center gap-2">
📻 Åpne i din podkast-app <IconPodcast /> Åpne i din podkast-app
</ButtonLink> </ButtonLink>
<div className="w-full flex"> <div className="w-full flex">
<CopyButton copyText={feedUrl.toString()} className="whitespace-nowrap"> <CopyButton copyText={feedUrl.toString()} className="whitespace-nowrap flex items-center gap-2">
Kopier URL Kopier URL
</CopyButton> </CopyButton>
<pre className="w-full font-mono bg-black text-white select-all p-2 overflow-x-auto"> <pre className="w-full font-mono bg-black text-white select-all p-2 overflow-x-auto">

15
islands/CopyButton.tsx
View File

@ -2,6 +2,9 @@ import { ComponentChildren, JSX } from "preact";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { IS_BROWSER } from "$fresh/runtime.ts"; import { IS_BROWSER } from "$fresh/runtime.ts";
import { Button } from "../components/Button.tsx"; import { Button } from "../components/Button.tsx";
import IconCopy from "https://deno.land/x/tabler_icons_tsx@0.0.5/tsx/copy.tsx";
// BUG: We have to use the GitHub URL until they resolve the issue: https://github.com/hashrock/tabler-icons-tsx/issues/16
import IconCopyCheck from "https://raw.githubusercontent.com/hashrock/tabler-icons-tsx/df5d89c516984fde5c8ec8a382a1348f9fa1aee6/tsx/copy-check.tsx";
type Props = { type Props = {
copyText: string; copyText: string;
@ -29,7 +32,17 @@ export default function CopyButton(props: Props) {
disabled={!IS_BROWSER || disabled} disabled={!IS_BROWSER || disabled}
{...buttonProps} {...buttonProps}
> >
{clicked ? "Kopiert!" : children} {clicked
? (
<>
<IconCopyCheck /> Kopiert!
</>
)
: (
<>
<IconCopy /> {children}
</>
)}
</Button> </Button>
); );
} }