Commit 3bcad816 authored by David Trattnig's avatar David Trattnig
Browse files

Locate media player in head area of episode

parent 66b2ae81
......@@ -2,26 +2,20 @@
import Card, { Content, Actions } from '@smui/card'
import LayoutGrid, { Cell } from '@smui/layout-grid'
import Button, { Label } from '@smui/button'
import { customUrl } from '../stores.js'
import Display from '../common/Display.svelte'
import DateTime from '../common/DateTime.svelte'
import { openLink, hasEpisodeMedia, isCbaUrl } from '../common/Common.svelte'
import { openLink } from '../common/Common.svelte'
import EpisodeImage from '../elements/EpisodeImage.svelte'
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 = 'Play'
export let labelLinkArchive = 'Listen in archive'
export let labelPlay = undefined
export let labelLinkArchive = undefined
/* Messages the player to player the given episode */
function play(episode) {
let audioUrl = episode.note.audio_url
console.log('Updating custom audio url in store to ', audioUrl)
customUrl.update(() => audioUrl)
}
</script>
<style lang="scss">
......@@ -38,9 +32,6 @@
margin-bottom: 0;
margin-top: 0;
}
* :global(.episode-media) {
padding-left: 0;
}
* :global(button) {
text-transform: initial;
margin: 0;
......@@ -87,58 +78,19 @@
{/if}
</Content>
<Content class="mdc-typography--body2 content">
{#if episode.note.content != null}
<Display
value={episode.note.content.replace(/\n/g, '<br />')}
{renderhtml}
renderLinks={true} />
{/if}
</Content>
{#if hasEpisodeMedia(episode) && (!episode.note.cba_id || episode.note.cba_id && !embedCbaPlayer)}
<Content class="mdc-typography--body2 media">
<Actions class="episode-media">
{#if episode.note.cba_id}
<Button
variant="outlined"
class="open-media-player"
on:click={play(episode)}>
<Label class="play">{labelPlay}</Label>
</Button>
{/if}
{#if episode.note.audio_url && !(isCbaUrl(episode) && embedCbaPlayer)}
<Button
variant="outlined"
class="open-archive"
on:click={openLink(episode.note.audio_url)}>
<Label class="archive-url">
{#if isCbaUrl(episode)}
<div class="aura-icon cba" />
{:else}{labelLinkArchive}{/if}
</Label>
</Button>
{/if}
</Actions>
</Content>
{/if}
<Content class="media-player">
{#if embedCbaPlayer && episode.note.cba_id}
<iframe
id="cba-embedded-player"
title="Embedded CBA Player"
src="https://cba.fro.at/549819/embed?audio&q=1&waveform=false&title=false&socialmedia=true"
width="100%"
height="99"
style="border:none; width:100%; height:99px;" />
{/if}
</Content>
<EpisodePlayMedia {episode} {labelPlay} {labelLinkArchive} {embedCbaPlayer} />
</div>
</Cell>
</LayoutGrid>
<Content class="mdc-typography--body2 content">
{#if episode.note.content != null}
<Display
value={episode.note.content.replace(/\n/g, '<br />')}
{renderhtml}
renderLinks={true} />
{/if}
</Content>
</Card>
{:else}
<div class="loading">
......
<script>
import { Content, Actions } from '@smui/card'
import Button, { Label } from '@smui/button'
import { openLink, hasEpisodeMedia, isCbaUrl } from '../common/Common.svelte'
import { customUrl } from '../stores.js'
export let episode = undefined
export let embedCbaPlayer = false
export let labelPlay = 'Play'
export let labelLinkArchive = 'Listen in archive'
/* Messages the player to player the given episode */
function play(episode) {
let audioUrl = episode.note.audio_url
console.log('Updating custom audio url in store to ', audioUrl)
customUrl.update(() => audioUrl)
}
</script>
<style lang="scss">
/* SMUI components need to be selected via global namespace */
* :global(.episode-media) {
padding-left: 0;
}
</style>
<template>
{#if hasEpisodeMedia(episode) && (!episode.note.cba_id || (episode.note.cba_id && !embedCbaPlayer))}
<Content class="mdc-typography--body2 media">
<Actions class="episode-media">
{#if episode.note.cba_id}
<Button
variant="outlined"
class="open-media-player"
on:click={play(episode)}>
<Label class="play">{labelPlay}</Label>
</Button>
{/if}
{#if episode.note.audio_url && !(isCbaUrl(episode) && embedCbaPlayer)}
<Button
variant="outlined"
class="open-archive"
on:click={openLink(episode.note.audio_url)}>
<Label class="archive-url">
{#if isCbaUrl(episode)}
<div class="aura-icon cba" />
{:else}{labelLinkArchive}{/if}
</Label>
</Button>
{/if}
</Actions>
</Content>
{/if}
{#if embedCbaPlayer && episode.note.cba_id}
<Content class="media-player">
<iframe
id="cba-embedded-player"
title="Embedded CBA Player"
src="https://cba.fro.at/{episode.note.cba_id}/embed?audio&q=1&waveform=false&title=false&socialmedia=true"
width="100%"
height="99"
style="border:none; width:100%; height:99px;" />
</Content>
{/if}
</template>
Supports Markdown
0% or .
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment