diff --git a/src/cards/CategoryCard.svelte b/src/cards/CategoryCard.svelte
index 1b9c1f2ff9f261522e7ba9ee1cfd92aaaad68d22..80a8e61594b429f8665c2770a6cbe42101b9a5c6 100644
--- a/src/cards/CategoryCard.svelte
+++ b/src/cards/CategoryCard.svelte
@@ -1,11 +1,13 @@
<script lang="ts">
+ import { getContext } from 'svelte'
import Ripple from '@smui/ripple'
import Card, { Content } from '@smui/card'
import CategoryHeading from '../elements/CategoryHeading.svelte'
export let category: any
- export let urlShowList: string
- export let renderHtml: boolean // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+ const context: { [name: string]: any } = getContext('category')
+ const urlShowList = context.urlShowList
</script>
<style lang="scss">
@@ -20,7 +22,7 @@
<Card class="aura-card category cat-{category.id}">
<div use:Ripple={{ surface: true }}>
<Content class="category-content">
- <CategoryHeading {category} {renderHtml} headingLevel={2} />
+ <CategoryHeading headingLevel={2} {category} />
</Content>
</div>
</Card>
diff --git a/src/cards/EpisodeCardBig.svelte b/src/cards/EpisodeCardBig.svelte
index 1f1c663911405f26e6d739ed30a8d9bcb77e758e..ddfd12f7b642d1ef5b1c7c36f4ffa9a6a585a7be 100644
--- a/src/cards/EpisodeCardBig.svelte
+++ b/src/cards/EpisodeCardBig.svelte
@@ -1,4 +1,5 @@
<script>
+ import { getContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import Card, { Content } from '@smui/card'
import LayoutGrid, { Cell } from '@smui/layout-grid'
@@ -8,12 +9,14 @@
import EpisodePlayMedia from '../elements/EpisodePlayMedia.svelte'
export let embedCbaPlayer = true
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
export let show = undefined
export let episode = undefined
export let urlShowDetail = undefined
export let labelPlay = undefined
export let labelLinkArchive = undefined
+
+ const context = getContext('episode')
+ const renderHtml = context.renderHtml
</script>
<style lang="scss">
diff --git a/src/cards/EpisodeCardSmall.svelte b/src/cards/EpisodeCardSmall.svelte
index a196d25ebffb5686b26d3f1e3862cd0448e563cd..655158013e1fa90dc48f698375ff4366e2c6d025 100644
--- a/src/cards/EpisodeCardSmall.svelte
+++ b/src/cards/EpisodeCardSmall.svelte
@@ -1,5 +1,5 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, getContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import Ripple from '@smui/ripple'
import Card, { Content } from '@smui/card'
@@ -9,7 +9,9 @@
export let episode = undefined
export let urlEpisodeDetail = undefined
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+ const context = getContext('episode')
+ const renderHtml = context.renderHtml
/* Initialize the component */
onMount(() => {})
diff --git a/src/cards/HostCardAvatar.svelte b/src/cards/HostCardAvatar.svelte
index 905fa7991107572e57a99af548809b75369c8ab7..c541739372967a8202e147df9cdecbd3cbb315a7 100644
--- a/src/cards/HostCardAvatar.svelte
+++ b/src/cards/HostCardAvatar.svelte
@@ -1,12 +1,15 @@
<script>
+ import { getContext } from 'svelte'
import Ripple from '@smui/ripple'
import Card, { Media } from '@smui/card'
import Display from '../common/Display.svelte'
export let host = undefined
export let urlHostDetail = undefined
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
export let displayOverlay = false
+
+ const context = getContext('host')
+ const renderHtml = context.renderHtml
</script>
<style lang="scss">
diff --git a/src/cards/HostCardBig.svelte b/src/cards/HostCardBig.svelte
index 322851bc6a5182ac41bde2da639320449fce16ac..6ef3c29e20943b10fcbcec6ac896fc334818ef0b 100644
--- a/src/cards/HostCardBig.svelte
+++ b/src/cards/HostCardBig.svelte
@@ -1,5 +1,5 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, getContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import Card, { Content } from '@smui/card'
import LayoutGrid, { Cell } from '@smui/layout-grid'
@@ -8,12 +8,14 @@
import HostCardAvatar from './HostCardAvatar.svelte'
import ShowCardSmall from './ShowCardSmall.svelte'
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
export let labelShows = 'Shows'
export let host = undefined
export let shows = undefined
export let urlShowDetail = undefined
+ const context = getContext('host')
+ const renderHtml = context.renderHtml
+
/* Initialize the component */
onMount(() => {})
</script>
@@ -98,7 +100,7 @@
<Cell span={4}>
<div class="card-cell cell-right">
<div class="card-container detail">
- <HostCardAvatar {host} {renderHtml} />
+ <HostCardAvatar {host} />
</div>
</div>
</Cell>
@@ -110,7 +112,7 @@
<h2>{labelShows}</h2>
<div class="show-list-small card-container list contained">
{#each shows as show}
- <ShowCardSmall {show} {urlShowDetail} {renderHtml} />
+ <ShowCardSmall {show} {urlShowDetail} />
{/each}
</div>
</div>
diff --git a/src/cards/NowPlayingCard.svelte b/src/cards/NowPlayingCard.svelte
index d6e9b8614126a38c3c0b11eeeb7aafb390a7f17c..9db8180fec305b89913d231b6f21ec9278fef31f 100644
--- a/src/cards/NowPlayingCard.svelte
+++ b/src/cards/NowPlayingCard.svelte
@@ -1,4 +1,5 @@
<script lang="ts">
+ import { getContext } from 'svelte'
import Card, { Content } from '@smui/card'
import Button, { Icon, Label } from '@smui/button'
import { hasEpisodeTitle } from '../common/Common.svelte'
@@ -7,8 +8,10 @@
export let episode: { [id: string]: string } = {}
export let prefixOnAir: string
- export let renderHtml: boolean // Attention: to avoid XSS attack vectors use with trusted API sources only
export let callbackButton: Function
+
+ const context: { [name: string]: any } = getContext('player')
+ const renderHtml: boolean = context.renderHtml
</script>
<style lang="scss">
diff --git a/src/cards/ShowCardBig.svelte b/src/cards/ShowCardBig.svelte
index d07741efad765b0b451ccdf80d4c84e6188355cd..740bc7285bf35d68a049bb7153b50a37f33d1e3a 100644
--- a/src/cards/ShowCardBig.svelte
+++ b/src/cards/ShowCardBig.svelte
@@ -1,5 +1,5 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, getContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import LayoutGrid, { Cell } from '@smui/layout-grid'
import Card, { Content } from '@smui/card'
@@ -11,7 +11,6 @@
import { createEventDispatcher } from 'svelte'
const dispatch = createEventDispatcher()
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
export let show = undefined
export let episodes = undefined
export let urlHostDetail = undefined
@@ -25,6 +24,9 @@
export let displayCatIcons = undefined
export let displayLangIcons = undefined
+ const context = getContext('show')
+ const renderHtml = context.renderHtml
+
function eventShowMore() {
dispatch('showMore')
}
@@ -178,7 +180,6 @@
<HostCardAvatar
{host}
{urlHostDetail}
- {renderHtml}
displayOverlay={true} />
{/each}
</div>
@@ -201,8 +202,7 @@
<span class={episode.isCurrent ? 'highlight' : ''}>
<EpisodeCardSmall
{episode}
- urlEpisodeDetail={urlEpisodeDetail + episode.id}
- {renderHtml} />
+ urlEpisodeDetail={urlEpisodeDetail + episode.id} />
</span>
{/each}
{:else}
diff --git a/src/cards/ShowCardMedium.svelte b/src/cards/ShowCardMedium.svelte
index 6fdc219ef021d10e37dd16c002359ab6e8c39227..0e34920bb5712ab7a3c2b44b8200d9b5122e9b0e 100644
--- a/src/cards/ShowCardMedium.svelte
+++ b/src/cards/ShowCardMedium.svelte
@@ -1,12 +1,14 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, getContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import Card, { Content, PrimaryAction, Media } from '@smui/card'
import Display from '../common/Display.svelte'
export let show = undefined
export let urlShowDetail = undefined
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+ const context = getContext('show')
+ const renderHtml = context.renderHtml
/* Initialize the component */
onMount(() => {})
diff --git a/src/cards/ShowCardSmall.svelte b/src/cards/ShowCardSmall.svelte
index fd1bb238a509a2c0e5612201441456acebcdbe64..34c7a087e3f3901b2df7744d2aaeb5e933e28362 100644
--- a/src/cards/ShowCardSmall.svelte
+++ b/src/cards/ShowCardSmall.svelte
@@ -1,15 +1,16 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, getContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import Ripple from '@smui/ripple'
import Card, { Content, Media } from '@smui/card'
import LayoutGrid, { Cell } from '@smui/layout-grid'
-
import Display from '../common/Display.svelte'
export let show = undefined
export let urlShowDetail = undefined
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+ const context = getContext('show')
+ const renderHtml = context.renderHtml
/* Initialize the component */
onMount(() => {})
diff --git a/src/cards/TimeslotCard.svelte b/src/cards/TimeslotCard.svelte
index affc775e18d62bb0e3f9574f35a956dd4e8e04ed..f94e5022633b449b30033c69b41203d365e57ca1 100644
--- a/src/cards/TimeslotCard.svelte
+++ b/src/cards/TimeslotCard.svelte
@@ -1,5 +1,5 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, getContext } from 'svelte'
import Ripple from '@smui/ripple'
import Card from '@smui/card'
import LayoutGrid, { Cell } from '@smui/layout-grid'
@@ -19,7 +19,9 @@
export let displayCatTitle = undefined
export let displayCatIcons = undefined
export let displayLangIcons = undefined
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+ const context = getContext('programme')
+ const renderHtml = context.renderHtml
let isActive = false
diff --git a/src/components/CategoryList.svelte b/src/components/CategoryList.svelte
index 8dd5b24466d0cca1c18b474721b5bde6bbde5abf..d6343e34df3208fc754a6e778f5d3d8e81cfb442 100644
--- a/src/components/CategoryList.svelte
+++ b/src/components/CategoryList.svelte
@@ -1,14 +1,18 @@
<script lang="ts">
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import { settings, fetchApi, shuffle } from '../common/Common.svelte'
import CategoryCard from '../cards/CategoryCard.svelte'
export let categoriesToDisplay: [] // Default: Display all categories
export let shuffleCategories: boolean = false
- /* Nested props */
export let urlShowList: string
- export let renderHtml: boolean = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+ export let renderHtml: boolean = false
+
+ setContext('category', {
+ renderHtml: renderHtml,
+ urlShowList: urlShowList,
+ })
let categories: any[]
@@ -54,7 +58,7 @@
<div class="card-container list">
{#if categories}
{#each categories as category}
- <CategoryCard {category} {urlShowList} {renderHtml} />
+ <CategoryCard {category} />
{/each}
{:else}
<Spinner />
diff --git a/src/components/EpisodeDetail.svelte b/src/components/EpisodeDetail.svelte
index 3b0c4c587fdba1e6e5d275da12162f03aefa3e94..4dc21ed92987bfabcebff6810abed89d7a690cd8 100644
--- a/src/components/EpisodeDetail.svelte
+++ b/src/components/EpisodeDetail.svelte
@@ -1,16 +1,20 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import { settings, fetchApi } from '../common/Common.svelte'
import EpisodeCardBig from '../cards/EpisodeCardBig.svelte'
export let episodeId = undefined
- /* Nested Component Props */
+
export let labelPlay = undefined
export let labelLinkArchive = undefined
export let urlShowDetail = undefined
export let embedCbaPlayer = true
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+ export let renderHtml = false
+
+ setContext('episode', {
+ renderHtml: renderHtml,
+ })
let episode
let show
@@ -64,8 +68,7 @@
{urlShowDetail}
{labelPlay}
{labelLinkArchive}
- {embedCbaPlayer}
- {renderHtml} />
+ {embedCbaPlayer} />
{:else}
<Spinner />
{/if}
diff --git a/src/components/HostDetail.svelte b/src/components/HostDetail.svelte
index 62a3597774e2ba14ef9b4c1735ceacde000dfa03..caa2249b1a2c88829d0be8055c68a29253a761b1 100644
--- a/src/components/HostDetail.svelte
+++ b/src/components/HostDetail.svelte
@@ -1,15 +1,22 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import { settings, fetchApi } from '../common/Common.svelte'
import HostCardBig from '../cards/HostCardBig.svelte'
export let hostid = undefined
- /* Nested Component Props */
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+ export let renderHtml = false
export let labelShows = undefined
export let urlShowDetail = undefined
+ setContext('host', {
+ renderHtml: renderHtml,
+ })
+ setContext('show', {
+ renderHtml: renderHtml,
+ })
+
let host
let shows
@@ -46,7 +53,7 @@
<div class="card-container detail">
{#if host}
- <HostCardBig {host} {shows} {urlShowDetail} {labelShows} {renderHtml} />
+ <HostCardBig {host} {shows} {urlShowDetail} {labelShows} />
{:else}
<Spinner />
{/if}
diff --git a/src/components/HostList.svelte b/src/components/HostList.svelte
index f04b2e3c7635ef167ba162b42a6e61f84dd6c468..bfa6993f92209c7a018749e2095ef00d7c4e9d30 100644
--- a/src/components/HostList.svelte
+++ b/src/components/HostList.svelte
@@ -1,13 +1,11 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import Button, { Label } from '@smui/button'
import { settings, fetchApi } from '../common/Common.svelte'
import HostCardAvatar from '../cards/HostCardAvatar.svelte'
// import Pagination from '../Pagination.svelte'
- // export let api = 'https://prog-info.o94.at/api.php'
- // export let endpoint = 'hosts'
export let urlHostDetail = undefined
export let page = 0
export let limit = 300
@@ -21,6 +19,10 @@
// export let pageprev = "Previous page";
// export let pagenext = "Next page";
+ setContext('host', {
+ renderHtml: renderHtml,
+ })
+
let hosts = []
let count
let active_hosts
@@ -101,11 +103,7 @@
{#if hosts && hosts.length > 0}
<div class="card-container list">
{#each hosts as host}
- <HostCardAvatar
- {urlHostDetail}
- {host}
- {renderHtml}
- displayOverlay={true} />
+ <HostCardAvatar {urlHostDetail} {host} displayOverlay={true} />
{/each}
</div>
{:else}
diff --git a/src/components/MediaPlayer.svelte b/src/components/MediaPlayer.svelte
index 9c0b42dcb59bcd99d2a3322570f6128c85f3bec3..a3027d1b79faf6b957112932311029ebc63d1383 100644
--- a/src/components/MediaPlayer.svelte
+++ b/src/components/MediaPlayer.svelte
@@ -1,5 +1,5 @@
<script lang="ts">
- import { onMount, onDestroy } from 'svelte'
+ import { onMount, onDestroy, setContext } from 'svelte'
import { addTrackStore } from '../stores.js'
import Spinner from '../common/Spinner.svelte'
import MediaPlayerCenter from '../elements/MediaPlayerCenter.svelte'
@@ -20,6 +20,10 @@
export var urlShowDetail: string = '/show-detail.html?slug='
export var urlShowList: string = '/show-list.html'
+ setContext('player', {
+ renderHtml: renderHtml,
+ })
+
const TABS: Array<{ [id: string]: string }> = [
{ id: 'now', icon: 'aura-icon-small icon-now', label: 'Now' },
{
@@ -335,8 +339,7 @@
renderLinks={renderProgrammeLinks}
{urlEpisodeDetail}
{urlShowDetail}
- {urlShowList}
- {renderHtml} />
+ {urlShowList} />
</div>
{:else if activeTab && activeTab.id === 'playlist'}
<div id="aura-media-player-tab-playlist" class="tab-content">
diff --git a/src/components/NowPlayingWidget.svelte b/src/components/NowPlayingWidget.svelte
index 0092c9f13765f682a85212698a8908a9d16e300b..e616b56a805f2225c4cd14ca86416abd28993045 100644
--- a/src/components/NowPlayingWidget.svelte
+++ b/src/components/NowPlayingWidget.svelte
@@ -16,7 +16,7 @@
</script>
<script lang="ts">
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import NowPlayingCard from '../cards/NowPlayingCard.svelte'
import { settings, continuousFetch } from '../common/Common.svelte'
@@ -26,7 +26,11 @@
'location=no,height=632,width=344,scrollbars=no,status=no'
export let refreshtime: number = 60
export let prefixOnAir: string = 'LIVE'
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+ export let renderHtml = false
+
+ setContext('player', {
+ renderHtml: renderHtml,
+ })
let episode: { [id: string]: string } = {}
@@ -61,11 +65,7 @@
<template>
{#if episode}
- <NowPlayingCard
- {episode}
- {prefixOnAir}
- {renderHtml}
- callbackButton={() => popup()} />
+ <NowPlayingCard {episode} {prefixOnAir} callbackButton={() => popup()} />
{:else}
<Spinner />
{/if}
diff --git a/src/components/Player.svelte b/src/components/Player.svelte
index dad3b673f89db8fbc3d255495a7b2ef6ad9824c4..b39ca5fe94a565d5451be9408dce95b13134fd93 100644
--- a/src/components/Player.svelte
+++ b/src/components/Player.svelte
@@ -1,5 +1,5 @@
<script>
- import { onMount, onDestroy } from 'svelte'
+ import { onMount, onDestroy, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import { customUrl } from '../stores.js'
import Display from '../common/Display.svelte'
@@ -13,7 +13,11 @@
export let playerwindowsettings =
'location=no,height=350,width=670,scrollbars=no,status=no'
export let refreshtime = '60'
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+ export let renderHtml = false
+
+ setContext('player', {
+ renderHtml: renderHtml,
+ })
let currentShow
@@ -155,10 +159,10 @@
aria-describedby="player-description">
<div class="info-wrapper">
<span class="episode-title">
- <Display value={currentShow.name} {renderHtml} />
+ <Display value={currentShow.name} />
</span>
<span class="episode-info">
- <Display value={currentShow.note_title} {renderHtml} />
+ <Display value={currentShow.note_title} />
</span>
<span class="track-service">
<span class="current-track">{displayTrack(currentShow)}</span>
diff --git a/src/components/Programme.svelte b/src/components/Programme.svelte
index d188e4714c8e7fa0e8db29895311876a8c405b83..71412492e934f27f37efd2506c2061e8c354f32c 100644
--- a/src/components/Programme.svelte
+++ b/src/components/Programme.svelte
@@ -1,5 +1,5 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import {
settings,
@@ -16,9 +16,9 @@
export let startActive = false
export let refreshTime = '60'
export let view = 'card' // 'card' or 'paper'
- /* Nested Component Props */
+
export let renderLinks = true
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+ export let renderHtml = false
export let displayCatTitle = false
export let displayCatIcons = false
export let displayLangIcons = false
@@ -28,6 +28,10 @@
export let urlDefaultFallbackShow =
'https://o94.at/programm/Musiktracker_in-random-order'
+ setContext('programme', {
+ renderHtml: renderHtml,
+ })
+
let programme
/* Initialize the component */
@@ -121,8 +125,7 @@
{urlShowList}
{displayCatTitle}
{displayCatIcons}
- {displayLangIcons}
- {renderHtml} />
+ {displayLangIcons} />
{/each}
</div>
{:else if view == 'paper'}
@@ -131,8 +134,7 @@
{programme}
{urlEpisodeDetail}
{urlShowDetail}
- {renderLinks}
- {renderHtml} />
+ {renderLinks} />
</div>
{:else}
<div class="error">Invalid programme view type.</div>
diff --git a/src/components/ShowDetail.svelte b/src/components/ShowDetail.svelte
index 4ba1f582c7f9d04bd51e90b2a5b8d25841887bd7..4812311ef2d5f26468867c584ee122098f94c38d 100644
--- a/src/components/ShowDetail.svelte
+++ b/src/components/ShowDetail.svelte
@@ -1,19 +1,16 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import { settings, fetchApi, formatApiDate } from '../common/Common.svelte'
import ShowCardBig from '../cards/ShowCardBig.svelte'
- // export let api = 'https://prog-info.o94.at/api.php'
- // export let endpointShows = 'shows'
- // export let endpointEpisodes = 'timeslots'
export let showSlug = undefined
export let episodeDaysFuture = 360
export let episodeDaysPast = 180
export let maxFutureEpisodes = 8
export let defaultPastEpisodes = 7
- /* Nested Component Props */
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+
+ export let renderHtml = false
export let displayCatTitle = false
export let displayCatIcons = false
export let displayLangIcons = false
@@ -26,6 +23,16 @@
export let urlShowList = undefined
export let radioEpoch = new Date('1998-08-17')
+ setContext('show', {
+ renderHtml: renderHtml,
+ })
+ setContext('host', {
+ renderHtml: renderHtml,
+ })
+ setContext('episode', {
+ renderHtml: renderHtml,
+ })
+
let endpointShow = settings.api.endpoints.show
let endpointEpisode = settings.api.endpoints.episode
let tmp_show // FIXME Workaround for current API limitations: It's not possible to fetch everything in one request (see below)
@@ -165,7 +172,6 @@
{labelEpisodes}
{labelCurrentNone}
{labelShowMore}
- {renderHtml}
{hasMoreEpisodes}
{displayCatTitle}
{displayCatIcons}
diff --git a/src/components/ShowList.svelte b/src/components/ShowList.svelte
index 523905fab3797a94c1a06c4ee3400efe47cf8f23..9c7da137c66d3a3e237d362fd179b33cae4a3a29 100644
--- a/src/components/ShowList.svelte
+++ b/src/components/ShowList.svelte
@@ -1,5 +1,5 @@
<script>
- import { onMount } from 'svelte'
+ import { onMount, setContext } from 'svelte'
import Spinner from '../common/Spinner.svelte'
import Select, { Option } from '@smui/select'
import { settings, fetchApi } from '../common/Common.svelte'
@@ -13,8 +13,14 @@
export let language = undefined
export let labelAllShows = 'All shows'
export let enableCategoryDropdown = false
- /* Nested Component Props */
- export let renderHtml = false // Attention: to avoid XSS attack vectors use with trusted API sources only
+ export let renderHtml = false
+
+ setContext('show', {
+ renderHtml: renderHtml,
+ })
+ setContext('category', {
+ renderHtml: renderHtml,
+ })
let query
let shows
@@ -134,11 +140,7 @@
<template>
<div class="show-overview">
{#if selectedCat}
- <CategoryHeading
- category={selectedCat}
- {language}
- {renderHtml}
- headingLevel={1} />
+ <CategoryHeading category={selectedCat} {language} headingLevel={1} />
{/if}
{#if allCategories && enableCategoryDropdown}
@@ -156,7 +158,7 @@
<div class="card-container list">
{#if shows}
{#each shows as show}
- <ShowCardMedium {show} {urlShowDetail} {renderHtml} />
+ <ShowCardMedium {show} {urlShowDetail} />
{/each}
{:else}
<Spinner />
diff --git a/src/elements/CategoryHeading.svelte b/src/elements/CategoryHeading.svelte
index 536d0018f854977ec42c6161eb52dc23aa4be782..dcdb2cc9a47d3c14ddb51180c3376b2c762dec85 100644
--- a/src/elements/CategoryHeading.svelte
+++ b/src/elements/CategoryHeading.svelte
@@ -1,11 +1,14 @@
<script lang="ts">
+ import { getContext } from 'svelte'
import Display from '../common/Display.svelte'
// import HeadingTag from './HeadingTag.svelte'
export let category: { [name: string]: any }
export let language: string = ''
export let headingLevel: number = 1
- export let renderHtml: boolean
+
+ const categoryContext: { [name: string]: any } = getContext('category')
+ const renderHtml: boolean = categoryContext.renderHtml
</script>
<style lang="scss">