Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Added original rss feed to the podcast detail page. #433

Merged
merged 2 commits into from
Nov 15, 2023
Merged
Show file tree
Hide file tree
Changes from 1 commit
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion ui/src/language/json/de.json
Original file line number Diff line number Diff line change
Expand Up @@ -176,5 +176,6 @@
"podcast-episode-played": "{{percentage}} abgespielt",
"restart-playing": "Erneut abspielen",
"you-already-listened": "Die Episode <name/> wurde bereits abgespielt. Möchtest du sie nochmal anhören oder eine andere Episode auswählen?",
"podcast-not-found": "Podcast nicht gefunden"
"podcast-not-found": "Podcast nicht gefunden",
"original-rss-feed": "Original RSS Feed"
}
3 changes: 2 additions & 1 deletion ui/src/language/json/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -176,5 +176,6 @@
"podcast-episode-played": "{{percentage}} played",
"restart-playing": "Restart playing",
"you-already-listened": "You already listened to the episode <name/>. Do you want to restart playing?",
"podcast-not-found": "Podcast not found"
"podcast-not-found": "Podcast not found",
"original-rss-feed": "Original RSS feed"
}
3 changes: 2 additions & 1 deletion ui/src/language/json/es.json
Original file line number Diff line number Diff line change
Expand Up @@ -174,5 +174,6 @@
"podcast-episode-played": "{{percentage}} reproducido",
"restart-playing": "Reiniciar reproducción",
"you-already-listened": "Ya has escuchado el episodio <name/>. Quieres reiniciar la reproducción?",
"podcast-not-found": "Podcast no encontrado"
"podcast-not-found": "Podcast no encontrado",
"original-rss-feed": "Fuente RSS original"
}
3 changes: 2 additions & 1 deletion ui/src/language/json/fr.json
Original file line number Diff line number Diff line change
Expand Up @@ -175,5 +175,6 @@
"podcast-episode-played": "{{percentage}} joué",
"restart-playing": "Recommencer à jouer",
"you-already-listened": "Vous avez déjà écouté l'épisode <name/>. Vous pouvez le réécouter en cliquant sur le bouton ci-dessous",
"podcast-not-found": "Podcast non trouvé"
"podcast-not-found": "Podcast non trouvé",
"original-rss-feed": "Flux RSS original"
}
3 changes: 2 additions & 1 deletion ui/src/language/json/pl.json
Original file line number Diff line number Diff line change
Expand Up @@ -175,5 +175,6 @@
"podcast-episode-played": "{{percentage}} został odtworzony.",
"restart-playing": "Restartuj odtwarzanie",
"you-already-listened": "Już odtworzono <name/>",
"podcast-not-found": "Nie znaleziono podcastu"
"podcast-not-found": "Nie znaleziono podcastu",
"original-rss-feed": "Oryginalny kanał RSS"
}
87 changes: 53 additions & 34 deletions ui/src/pages/PodcastDetailPage.tsx
Original file line number Diff line number Diff line change
@@ -1,16 +1,16 @@
import { Fragment, useEffect, useState } from 'react'
import { useParams } from 'react-router-dom'
import { useTranslation } from 'react-i18next'
import axios, {AxiosResponse } from 'axios'
import { apiURL, removeHTML } from '../utils/Utilities'
import {Fragment, useEffect, useState} from 'react'
import {useParams} from 'react-router-dom'
import {useTranslation} from 'react-i18next'
import axios, {AxiosResponse} from 'axios'
import {apiURL, removeHTML} from '../utils/Utilities'
import useCommon, {Podcast} from '../store/CommonSlice'
import useAudioPlayer from '../store/AudioPlayerSlice'
import { Chip } from '../components/Chip'
import { Heading1 } from '../components/Heading1'
import { Heading2 } from '../components/Heading2'
import { PodcastDetailItem } from '../components/PodcastDetailItem'
import { PodcastInfoModal } from '../components/PodcastInfoModal'
import { Switcher } from '../components/Switcher'
import {Chip} from '../components/Chip'
import {Heading1} from '../components/Heading1'
import {Heading2} from '../components/Heading2'
import {PodcastDetailItem} from '../components/PodcastDetailItem'
import {PodcastInfoModal} from '../components/PodcastInfoModal'
import {Switcher} from '../components/Switcher'
import 'material-symbols/outlined.css'
import {EpisodesWithOptionalTimeline} from "../models/EpisodesWithOptionalTimeline";
import {PodcastEpisodeAlreadyPlayed} from "../components/PodcastEpisodeAlreadyPlayed";
Expand All @@ -23,7 +23,7 @@
const setCurrentPodcast = useAudioPlayer(state => state.setCurrentPodcast)
const params = useParams()
const [lineClamp, setLineClamp] = useState(true)
const { t } = useTranslation()
const {t} = useTranslation()
const setCurrentDetailedPodcastId = useCommon(state => state.setCurrentDetailedPodcastId)
const setInfoModalPodcastOpen = useCommon(state => state.setInfoModalPodcastOpen)
const setSelectedEpisodes = useCommon(state => state.setSelectedEpisodes)
Expand All @@ -37,14 +37,14 @@
setCurrentPodcast(response.data)
}).then(() => {
axios.get(apiURL + '/podcast/' + params.id + '/episodes')
.then((response:AxiosResponse<EpisodesWithOptionalTimeline[]>) => {
.then((response: AxiosResponse<EpisodesWithOptionalTimeline[]>) => {
setSelectedEpisodes(response.data)

if (params.podcastid) {
const element = document.getElementById('episode_' + params.podcastid)

if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'})
}
}
})
Expand Down Expand Up @@ -76,21 +76,21 @@
const element = document.getElementById('episode_' + params.podcastid)

if (element) {
element.scrollIntoView({ behavior: 'smooth', block: 'start', inline: 'nearest' })
element.scrollIntoView({behavior: 'smooth', block: 'start', inline: 'nearest'})
}
}
}, [params])

useEffect(() => {
return ()=>{
return () => {
setInfoModalPodcastOpen(false)
}
}, []);

if (currentPodcast === undefined) {
return <div className="w-full md:w-3/4 mx-auto">
<ErrorIcon text={t('podcast-not-found')} />
</div>
return <div className="w-full md:w-3/4 mx-auto">
<ErrorIcon text={t('podcast-not-found')}/>
</div>
}

return (
Expand Down Expand Up @@ -124,12 +124,14 @@
">
<Heading1 className="inline align-middle mr-2">{currentPodcast.name}</Heading1>

<span className="material-symbols-outlined inline cursor-pointer align-middle text-[--fg-icon-color] hover:text-[--fg-icon-color-hover]" onClick={() => {
axios.post(apiURL + '/podcast/' + params.id + '/refresh')
.then(() => {
console.log('Refreshed')
})
}}>refresh</span>
<span
className="material-symbols-outlined inline cursor-pointer align-middle text-[--fg-icon-color] hover:text-[--fg-icon-color-hover]"
onClick={() => {
axios.post(apiURL + '/podcast/' + params.id + '/refresh')
.then(() => {
console.log('Refreshed')
})
}}>refresh</span>
</div>

{/* Metadata */}
Expand All @@ -147,7 +149,20 @@
))}
</div>}

<span className="material-symbols-outlined cursor-pointer text-[--fg-icon-color] hover:text-[--fg-icon-color-hover]" onClick={() => { window.open(configModel?.rssFeed + '/' + params.id) }}>rss_feed</span>
<span className="grid grid-cols-1 md:grid-cols-2">
<button className="flex gap-4"
onClick={() => window.open(configModel?.rssFeed + '/' + params.id)}>
<a className="material-symbols-outlined cursor-pointer text-[--fg-icon-color] hover:text-[--fg-icon-color-hover]"
Fixed Show fixed Hide fixed
target="_blank" href={configModel?.rssFeed + '/' + params.id}>rss_feed</a>
<span className="text-[--fg-color]">PodFetch</span>
</button>

<button className="flex gap-4" onClick={() => window.open(currentPodcast.rssfeed)}>
<a className="material-symbols-outlined cursor-pointer text-[--fg-icon-color] hover:text-[--fg-icon-color-hover]"
Fixed Show fixed Hide fixed
target="_blank" href={currentPodcast.rssfeed}>rss_feed</a>
<span className="text-[--fg-color]">{t('original-rss-feed')}</span>
</button>
</span>
</div>

{/* Toggle */}
Expand All @@ -163,19 +178,22 @@
<Switcher checked={currentPodcast.active} setChecked={() => {
axios.put(apiURL + '/podcast/' + params.id + '/active')
.then(() => {
setCurrentPodcast({ ...currentPodcast, active: !currentPodcast?.active })
setCurrentPodcast({...currentPodcast, active: !currentPodcast?.active})
})
}} />
}}/>
</div>
</div>

{/* Description */
currentPodcast.summary &&
currentPodcast.summary &&
<div className="relative leading-[1.75] mb-8 text-sm text-[--fg-color]">
<div id="summary" className={lineClamp?'line-clamp-3':''} dangerouslySetInnerHTML={removeHTML(currentPodcast.summary)}/>
{(isOverflown('summary')||lineClamp)&&<div className="cursor-pointer underline text-[--accent-color] hover:text-[--accent-color-hover]" onClick={() => {
setLineClamp(!lineClamp)
}}>
<div id="summary" className={lineClamp ? 'line-clamp-3' : ''}
dangerouslySetInnerHTML={removeHTML(currentPodcast.summary)}/>
{(isOverflown('summary') || lineClamp) && <div
className="cursor-pointer underline text-[--accent-color] hover:text-[--accent-color-hover]"
onClick={() => {
setLineClamp(!lineClamp)
}}>
{lineClamp ? t('show-more') : t('show-less')}
</div>}
</div>
Expand All @@ -186,7 +204,8 @@
<Heading2 className="mb-8">{t('available-episodes')}</Heading2>

{selectedEpisodes.map((episode, index) => (
<PodcastDetailItem episode={episode} key={episode.podcastHistoryItem?.id} index={index} episodesLength={selectedEpisodes.length} />
<PodcastDetailItem episode={episode} key={episode.podcastHistoryItem?.id} index={index}
episodesLength={selectedEpisodes.length}/>
))}
</div>
</div>
Expand Down
Loading