LMUCAST-PLAYLIST (component )
src/app/shared/components/lmucast-playlist/templates
Demo Section
Each variation will be presented in the following section.
Readme
lmucastPlaylist (component)
Description
This blueprint is based on the blueprint of Veams.
Requirements
Veams#5.0.0
Installation
Installation with Veams from local machine
veams install bp absolute/filepath/to/lmucast-playlist
Fields
lmucast-playlist.hbs
Settings
| Parameter | Type | Default | Description |
|---|---|---|---|
| settings.lmucastPlaylistClasses | String | '' |
Modifier classes for component |
| settings.lmucastPlaylistContextClass | String | 'default' |
Context class of component |
| settings.lmucastPlaylistJsOptions | Object | null |
JavaScript options object which gets stringified |
Content
| Parameter | Type | Description |
|---|---|---|
| content.lmucastPlaylistField | String | Please add a description! |
JavaScript Options
The module gives you the possibility to override default JS options:
| Option | Type | Default | Description |
|---|---|---|---|
| optionOne | String | 'is-option' |
Please add a description! |
SASS
Variables
There are multiple variables which you can change:
| Variable | Value | Description |
|---|---|---|
| $lmucast-playlist-my-custom-var | 0px |
Please add a description! |
Modifier Classes
There are modifier classes you can add to c-lmucast-playlist:
| Modifier | Description |
|---|---|
| is-modifier | Please add a description! |
Templates
lmucast-playlist.hbs
<script type="text/javascript">
function load() {
LMUcast.init({
config: {
rssUrl: 'https://cast.itunes.uni-muenchen.de/playlists/r8YwQgT9xA/online.rss',
clipUrlPrefix: 'https://cast.itunes.uni-muenchen.de/clips/',
showDownload: true,
showAudio: true,
format: 'en',
texts: {
links: {
videoLink: 'Video auf LMUcast ansehen',
downloadLink: 'Video als Download',
audioLink: 'Tonspur auf LMUcast anhören'
},
authorTitle: 'Sprecher',
},
cssPostfix: "rte"
},
container: 'LMUcast-playlist'
})
}
window.addEventListener('DOMContentLoaded', load);
</script>
<div class="c-lmucast-playlist" data-css="c-lmucast-playlist">
<div id="LMUcast-playlist"></div>
</div>
{{!--
<div class="c-lmucast-playlist--default" data-css="c-lmucast-playlist" data-js-module="lmucast-playlist">
<div class="grid__container" data-css="c-filterable-list">
<div class="grid__row">
<form class="c-form--filterable-list" data-css="c-form">
<div class="filterable-list__list-wrapper">
<h2>LMUcast-Playlist</h2>
<ul class="filterable-list__list">
<li class="filterable-list__list-item" data-js-item="filterable-list-list-item" tabindex="-1" :id="addId" :data-js-module="item.link.overlay" >
<div class="filterable-list__list-item-image">
<picture class="c-picture--default lazyload" data-css="c-picture">
<img class="picture__image lazyload"
src="https://cast.itunes.uni-muenchen.de/clips/XR5ENY9Zit/file/custom_poster?d=1610704681"
alt="LMUcast"
title="Was bleibt von Max Weber? Begriffe, Konzepte, Theorien">
</picture>
</div>
<div class="filterable-list__list-item-text-wrapper">
<em class="filterable-list__list-item-meta">
<span>09.07.2020</span>
</em>
<h3>Plant engineering. legal and Economics Aspects</h3>
<p class="subtitle">CRISOR/Cas - Chances and Challenges</p>
<div class="links">
<a href="#">Video auf LMUcast ansehen</a>
<a href="#">Video als download</a>
<a href="#">Tonspur auf LMUcasr anhören</a>
</div>
<div class="desctiption-wrapper">
<h4>Sprecher</h4>
<p>D. Oana Dima | Prof. Dr Caroline Gutjahr</p>
<p class="filterable-list__list-item-description">
A future Quantum Computer would allow to break public key systems like RSA. Ironically, quantum physics offers also an alternative way to distribute keys, Quantum Key Distribution, which can be shown to be information theoretically secure. Hugo Zbinden gives a short introduction on QKD and overview of the state of the art. He presents a so-called self-testing Quantum Random Number generator (QRNG), which has the unique feature that the generated entropy can be measured in real time. | Hugo Zbinden ist Professor an der Universität Genf und leitet die Quantum Technologies Group.
</p>
</div>
</div>
</li>
<li class="filterable-list__list-item" data-js-item="filterable-list-list-item" tabindex="-1" :id="addId" :data-js-module="item.link.overlay" >
<div class="filterable-list__list-item-image">
<picture class="c-picture--default lazyload" data-css="c-picture">
<img class="picture__image lazyload"
src="https://cast.itunes.uni-muenchen.de/clips/XR5ENY9Zit/file/custom_poster?d=1610704681"
alt="LMUcast"
title="Was bleibt von Max Weber? Begriffe, Konzepte, Theorien">
</picture>
</div>
<div class="filterable-list__list-item-text-wrapper">
<em class="filterable-list__list-item-meta">
<span class="filterable-list__list-item-meta-date">09.07.2020</span>
</em>
<h3>Plant engineering. legal and Economics Aspects</h3>
<p class="subtitle">CRISOR/Cas - Chances and Challenges</p>
<div class="links">
<a href="#">Video auf LMUcast ansehen</a>
<a href="#">Video als download</a>
<a href="#">Tonspur auf LMUcasr anhören</a>
</div>
<div class="desctiption-wrapper">
<h4>Sprecher</h4>
<p>D. Oana Dima | Prof. Dr Caroline Gutjahr</p>
<p class="filterable-list__list-item-description">
A future Quantum Computer would allow to break public key systems like RSA. Ironically, quantum physics offers also an alternative way to distribute keys, Quantum Key Distribution, which can be shown to be information theoretically secure. Hugo Zbinden gives a short introduction on QKD and overview of the state of the art. He presents a so-called self-testing Quantum Random Number generator (QRNG), which has the unique feature that the generated entropy can be measured in real time. | Hugo Zbinden ist Professor an der Universität Genf und leitet die Quantum Technologies Group.
</p>
</div>
</div>
</li>
</ul>
</div>
</form>
</div>
</div>
</div> --}}
Data File
lmucast-playlist.hjson
Styles
lmucast-playlist.scss
/* ===================================================
component: lmucast-playlist
=================================================== */
/* ---------------------------------------------------
Global Styles
--------------------------------------------------- */
[data-css="c-lmucast-playlist"] {
.lmucast-playlist__headline {
@include headline-h2-styles();
}
.lmucast-playlist__list-item-meta {
font-size: 1.6rem;
margin-bottom: 1.5rem;
}
.lmucast-playlist__list-item-title {
font-size: 1.8rem;
font-family: $font-bold;
line-height: (24/16);
letter-spacing: .25px;
display: inline-block;
margin-bottom: .5rem;
}
.lmucast-playlist__list-item-subtitle {
font-size: 1.6rem;
font-style: italic;
margin-bottom: .5rem;
}
.lmucast-playlist__list-item-links {
display: flex;
flex-direction: column;
.lmucast-playlist__list-item-links-link {
color: $color-green;
font-family: $font-bold;
font-size: 1.6rem;
line-height: (24/16);
letter-spacing: .3px;
margin-bottom: 12px;
text-decoration: none;
display: block;
transition: color $animation-duration-std/2 $animation-easing-std;
position: relative;
padding-left: 25px;
@include print() {
padding-left: 0;
}
&:focus {
outline: none;
}
/*
MODIFIERS
----------------------- */
&.is-icon {
&::before {
@include pseudo();
position: absolute;
display: inline-block;
top: 5px;
left: 0;
margin-right: 10px;
vertical-align: unset;
transition: transform $animation-duration-std $animation-easing-std;
@include print() {
display: none;
}
}
&.is-download {
&:hover {
color: $color-black;
&::before {
@include sprites-icon-download-black();
}
}
&::before {
@include sprites-icon-download-green60();
}
}
&.is-video {
&:hover {
color: $color-black;
&::before {
@include sprites-icon-video-black();
}
}
&::before {
@include sprites-icon-video-green100();
}
}
&.is-audio {
&:hover {
color: $color-black;
&::before {
@include sprites-icon-audio-liste-black();
}
}
&::before {
@include sprites-icon-audio-liste-green();
}
}
}
}
}
.lmucast-playlist__list-item-description-wrapper{
line-height: (24/16);
letter-spacing: .25px;
.lmucast-playlist__list-item-description-headline {
font-size: 1.6rem;
font-family: $font-bold;
line-height: (24/16);
letter-spacing: .25px;
display: inline-block;
margin-bottom: .5rem;
}
.lmucast-playlist__list-item-description-speaker {
font-size: 1.6rem;
display: inline-block;
margin-bottom: 1.5rem;
}
.lmucast-playlist__list-item-description-text {
font-size: 1.6rem;
}
}
}
/* ---------------------------------------------------
Context: Default
--------------------------------------------------- */
.c-lmucast-playlist--default {
}
Scripts
lmucast-playlist.js
HTML Output
<script type="text/javascript">
function load() {
LMUcast.init({
config: {
rssUrl: 'https://cast.itunes.uni-muenchen.de/playlists/r8YwQgT9xA/online.rss',
clipUrlPrefix: 'https://cast.itunes.uni-muenchen.de/clips/',
showDownload: true,
showAudio: true,
format: 'en',
texts: {
links: {
videoLink: 'Video auf LMUcast ansehen',
downloadLink: 'Video als Download',
audioLink: 'Tonspur auf LMUcast anhören'
},
authorTitle: 'Sprecher',
},
cssPostfix: "rte"
},
container: 'LMUcast-playlist'
})
}
window.addEventListener('DOMContentLoaded', load);
</script>
<div class="c-lmucast-playlist" data-css="c-lmucast-playlist">
<div id="LMUcast-playlist"></div>
</div>