MediaHeader.vue

<!--
  - @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 class="podcastHeader">
			<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>
				</div>
				<div
					v-show="isshow"
					class="podcastControls">
					<button class="icon-add-white podcastButton button new-button"
						:class="isSubscribed ? 'icon-delete' : 'icon-add-white primary'"
						@click="doSubscribe()">
						{{ getSubscribeText }}
					</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: '',
		},
		htmlurl: {
			type: String,
			default: '',
		},
		categories: {
			type: Array,
			default() {
				return []
			},
		},
		description: {
			type: String,
			default: '',
		},
		isshow: {
			type: Boolean,
			default: false,
		},
	},
	computed: {
		isSubscribed() {
			return this.$store.getters.showExists(this.podcastid)
		},
		getSubscribeText() {
			if (this.isSubscribed) {
				return t('podcast', 'Unsubscribe')
			} else {
				return t('podcast', 'Subscribe')
			}
		},
	},
	methods: {
		doSubscribe() {
			this.$emit('doSubscribe')
		},
		getCategoryName(categoryid) {
			return apiClient.getCategoryName(categoryid)
		},
	},
}
</script>

<style lang="scss">

.podcastHeaderBg {
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	transition: opacity .4s ease;
}

.podcastHeader {
	width: 100%;
	min-height: 280px;
	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;
		flex-shrink: 0;
	}

	.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;
		transition: opacity .4s ease;
	}

	.podcastDescription {
		max-width: 500px;
		width: 100%;
		color: #ddd;

		h1 {
			font-size: 30px;
			font-weight: bold;
			line-height: 1.2em;
			color: white;
		}

		.podcastAuthor {
			padding-bottom: 10px;

			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;
			}
		}

		ul.podcastCategory li {
			display: inline-block;
			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;
		}

		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>