Newer
Older
- @copyright Copyright (c) 2021 Jonas Heinrich
-
- @author Jonas Heinrich <onny@project-insanity.org>
-
- @license GNU AGPL version 3 or any later version
-
- This program is free software: you can redistribute it and/or modify
- it under the terms of the GNU Affero General Public License as
- published by the Free Software Foundation, either version 3 of the
- License, or (at your option) any later version.
-
- This program is distributed in the hope that it will be useful,
- but WITHOUT ANY WARRANTY; without even the implied warranty of
- MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
- GNU Affero General Public License for more details.
-
- You should have received a copy of the GNU Affero General Public License
- along with this program. If not, see <http://www.gnu.org/licenses/>.
-
-->
<template>
<div v-lazy:background-image="imgurl"
class="podcastHeaderBg">
<div v-lazy:background-image="imgurl"
class="podcastImage" />
<div class="podcastDescription">
<h1>{{ title }}</h1>
<div class="podcastAuthor">
by <a :href="htmlurl" :target="isshow ? '_blank' : ''">{{ author }}</a>
<button class="icon-add-white podcastButton button new-button"
:class="isSubscribed ? 'icon-delete' : 'icon-add-white primary'"
</button>
<ul class="podcastCategory">
<a v-for="(category, idx) in categories"
:key="idx"
:href="`#/browse/category/${categories[idx]}`">
<li>
{{ getCategoryName(categories[idx]) }}
</li>
</a>
</ul>
</div>
<vue-show-more-text
:text="description"
additional-container-css="padding: 0px;" />
<slot />
</div>
</div>
</div>
</template>
<script>
import vueShowMoreText from 'vue-show-more-text'
import { ShowApi } from './../services/ShowApi'
const apiClient = new ShowApi()
export default {
name: 'MediaHeader',
components: {
vueShowMoreText,
},
props: {
podcastid: {
type: Number,
default: null,
},
imgurl: {
type: String,
default: '',
},
title: {
type: String,
default: '',
},
author: {
type: String,
default: '',
},
type: String,
default: '',
},
categories: {
type: Array,
default() {
return []
},
},
description: {
type: String,
default: '',
},
isshow: {
type: Boolean,
default: false,
},
isSubscribed() {
return this.$store.getters.showExists(this.podcastid)
},
return t('podcast', 'Unsubscribe')
} else {
return t('podcast', 'Subscribe')
}
},
},
},
}
</script>
<style lang="scss">
.podcastHeaderBg {
background-size: cover;
background-position: center center;
background-attachment: fixed;
display: flex;
color: white;
justify-content: center;
padding: 40px 20px;
/* gap: 30px; */
background-color: rgba(0, 0, 0, .7);
backdrop-filter: blur(8px);
text-shadow: 1px 1px 2px rgba(0,0,0,.5);
.button {
text-shadow: 0px 0px 0px;
}
.podcastImage {
width: 200px;
height: 200px;
flex-shrink: 0;
background-size: cover;
background-position: center;
box-shadow: 0 4px 60px rgba(0,0,0,.5);
margin-right: 25px;
border-radius: 5px;
}
.podcastDescription {
max-width: 500px;
width: 100%;
color: #ddd;
h1 {
font-size: 30px;
font-weight: bold;
line-height: 1.2em;
color: white;
}
.podcastAuthor {
a {
color: white;
}
}
.podcastControls {
display: flex;
align-items: center;
margin-bottom: 5px;
.button {
margin-right: 10px;
margin-bottom: 5px;
margin-top: 0px;
align-self: start;
border: 1px solid var(--color-text-maxcontrast);
border-radius: var(--border-radius);
margin-right: 5px;
cursor: pointer;
color: var(--color-text-maxcontrast);
padding: 0px 7px;
margin-bottom: 5px;
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
}
ul.podcastCategory li:hover {
border: 1px solid white;
color: white;
}
}
}
.podcastButton {
padding-left: 35px;
padding-right: 15px;
background-position: 10px center;
}
@media only screen and (max-width: 500px) {
.podcastHeader {
flex-direction: column;
align-items: center;
.podcastImage {
margin-right: 0px;
margin-bottom: 25px;
}
.podcastDescription {
text-align: center;
.podcastControls {
justify-content: center;
}
}
}
}
</style>