Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,101 @@ | ||
| import {createRef, FC, useState} from 'react' | ||
| import {Link} from 'react-router-dom' | ||
| import axios from 'axios' | ||
| import {prependAPIKeyOnAuthEnabled} from '../utils/Utilities' | ||
| import useCommon, {Podcast} from '../store/CommonSlice' | ||
| import 'material-symbols/outlined.css' | ||
| import * as Context from '@radix-ui/react-context-menu' | ||
| import {ContextMenu} from "@radix-ui/react-context-menu"; | ||
| import {CustomInput} from "./CustomInput"; | ||
| import {PlusIcon} from "../icons/PlusIcon"; | ||
| import {PodcastTags} from "../models/PodcastTags"; | ||
|
|
||
| type PodcastCardProps = { | ||
| podcast: Podcast | ||
| } | ||
|
|
||
| export const PodcastCard: FC<PodcastCardProps> = ({podcast}) => { | ||
| const likeButton = createRef<HTMLElement>() | ||
| const updateLikePodcast = useCommon(state => state.updateLikePodcast) | ||
| const tags = useCommon(state=>state.tags) | ||
| const setTags = useCommon(state=>state.setPodcastTags) | ||
| const likePodcast = () => { | ||
| axios.put('/podcast/favored', { | ||
| id: podcast.id, | ||
| favored: !podcast.favorites | ||
| }) | ||
| } | ||
| const [newTag, setNewTag] = useState<string>('') | ||
|
|
||
| return ( | ||
| <Context.Root modal={true} onOpenChange={()=>{ | ||
|
|
||
| }}> | ||
| <Context.Trigger> | ||
| <Link className="group" to={podcast.id + '/episodes'}> | ||
| <div className="relative mb-2"> | ||
| <img | ||
| className={`rounded-xl transition-shadow group-hover:shadow-[0_4px_32px_rgba(0,0,0,var(--shadow-opacity))] ${!podcast.active ? 'opacity-20' : ''}`} | ||
| src={prependAPIKeyOnAuthEnabled(podcast.image_url)} alt=""/> | ||
|
|
||
| <span ref={likeButton} | ||
| className={`material-symbols-outlined filled absolute top-2 right-2 h-6 w-6 filled ${podcast.favorites ? 'text-rose-700 hover:text-rose-600' : 'text-stone-200 hover:text-stone-100'}`} | ||
| onClick={(e) => { | ||
| // Prevent icon click from triggering link to podcast detail | ||
| e.preventDefault() | ||
|
|
||
| likeButton.current?.classList.toggle('fill-amber-400') | ||
| likePodcast() | ||
| updateLikePodcast(podcast.id) | ||
| }}>favorite</span> | ||
| </div> | ||
|
|
||
| <div> | ||
| <span | ||
| className="block font-bold leading-[1.2] mb-2 text-[--fg-color] transition-colors group-hover:text-[--fg-color-hover]">{podcast.name}</span> | ||
| <span | ||
| className="block leading-[1.2] text-sm text-[--fg-secondary-color]">{podcast.author}</span> | ||
| </div> | ||
| </Link> | ||
| </Context.Trigger> | ||
| <Context.Portal> | ||
| <Context.Content className="bg-[--bg-color] p-5" onClick={(e)=>{ | ||
| e.preventDefault() | ||
| }}> | ||
| <h2 className="text-[--fg-color]">Tags</h2> | ||
| <hr className="mt-1 border-[1px] border-[--border-color] mb-2"/> | ||
| { | ||
| tags.map(t=>{ | ||
| return <Context.Item onClick={(e)=>{ | ||
| e.preventDefault() | ||
| }} className="group text-[13px] leading-none text-violet11 rounded-[3px] flex items-center h-[25px] px-[5px] relative pl-[25px] select-none outline-none data-[disabled]:text-mauve8 data-[disabled]:pointer-events-none data-[highlighted]:bg-violet9 data-[highlighted]:text-violet1 text-white"> | ||
| {t.name} | ||
| </Context.Item> | ||
| }) | ||
| } | ||
|
|
||
| <span className="relative"> | ||
| <PlusIcon className="absolute right-5 fill-white h-5 top-2 -translate-y-1/2 cursor-pointer" onClick={()=>{ | ||
| if(tags.map(t=>t.name).includes(newTag)||!newTag.trim()) { | ||
| return | ||
| } | ||
| const newTags: PodcastTags[] = [...tags, { | ||
| name: newTag, | ||
| color: "ffff", | ||
| id: "test123", | ||
| username: 'test', | ||
| created_at: "123123", | ||
| description: "§123123" | ||
| }] | ||
|
|
||
| setTags(newTags) | ||
| }}/> | ||
| <CustomInput placeholder="Add new tag" value={newTag} onChange={(event)=>{ | ||
| setNewTag(event.target.value) | ||
| }}/> | ||
| </span> | ||
| </Context.Content> | ||
| </Context.Portal> | ||
| </Context.Root> | ||
| ) | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,9 +1,10 @@ | ||
| import {FC} from "react"; | ||
|
|
||
| type PlusIconProps = { | ||
| className?: string, | ||
| onClick?: ()=>void | ||
| } | ||
|
|
||
| export const PlusIcon:FC<PlusIconProps> = ({className, onClick}) => { | ||
| return <svg onClick={onClick} xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" className={"h-8 mt-1 fill-amber-700 "+ className}><path d="M453-280h60v-166h167v-60H513v-174h-60v174H280v60h173v166Zm27.266 200q-82.734 0-155.5-31.5t-127.266-86q-54.5-54.5-86-127.341Q80-397.681 80-480.5q0-82.819 31.5-155.659Q143-709 197.5-763t127.341-85.5Q397.681-880 480.5-880q82.819 0 155.659 31.5Q709-817 763-763t85.5 127Q880-563 880-480.266q0 82.734-31.5 155.5T763-197.684q-54 54.316-127 86Q563-80 480.266-80Zm.234-60Q622-140 721-239.5t99-241Q820-622 721.188-721 622.375-820 480-820q-141 0-240.5 98.812Q140-622.375 140-480q0 141 99.5 240.5t241 99.5Zm-.5-340Z"/></svg> | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| export type PodcastTags = { | ||
| id: string, | ||
| name: string, | ||
| username: string, | ||
| description?: string, | ||
| created_at: string, | ||
| color: string | ||
| } |
Oops, something went wrong.