Skip to content
This repository has been archived by the owner on May 24, 2021. It is now read-only.

Commit

Permalink
feat(chapters): Adds support for chapter images
Browse files Browse the repository at this point in the history
  • Loading branch information
alexander-heimbuch committed Aug 2, 2018
1 parent 063e342 commit f4af652
Show file tree
Hide file tree
Showing 27 changed files with 522 additions and 405 deletions.
1 change: 0 additions & 1 deletion .babelrc
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@
"env": {
"AVA": {
"plugins": [
"transform-runtime",
[
"babel-plugin-webpack-alias",
{
Expand Down
41 changes: 20 additions & 21 deletions docs/test-standalone.html
Original file line number Diff line number Diff line change
Expand Up @@ -59,102 +59,101 @@
"start": "00:00:00.000",
"title": "Intro",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=1"
}, {
"start": "00:01:06.093",
"title": "Begr\u00fc\u00dfung",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=2"
}, {
"start": "00:05:25.332",
"title": "Grafikdesign",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=3"
}, {
"start": "00:26:55.784",
"title": "Textverarbeitung und Layout",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=4"
}, {
"start": "00:52:04.099",
"title": "SUBSCRIBE 9",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=5"
}, {
"start": "01:08:49.500",
"title": "Selbst\u00e4ndigkeit",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=6"
}, {
"start": "01:29:59.506",
"title": "Kalender",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=7"
}, {
"start": "01:34:46.120",
"title": "Hackintosh",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=8"
}, {
"start": "01:54:38.442",
"title": "IPv6",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=9"
}, {
"start": "02:04:55.918",
"title": "Themenstreit",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=10"
}, {
"start": "02:06:09.447",
"title": "iPhone X: Face ID",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=11"
}, {
"start": "02:22:43.126",
"title": "iPhone X: Kein Button",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=12"
}, {
"start": "02:43:44.267",
"title": "Digitale Verst\u00e4rker",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=13"
}, {
"start": "03:03:41.298",
"title": "Distribution und Merchandising",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=14"
}, {
"start": "03:37:44.867",
"title": "Kinos",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=15"
}, {
"start": "03:49:50.662",
"title": "Blade Runner 2049",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=16"
}, {
"start": "03:59:32.831",
"title": "Schokolade",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=17"
}, {
"start": "04:04:46.271",
"title": "Deutschland zum in der Pfeife rauchen",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random&chapter=18"
}, {
"start": "04:24:13.528",
"title": "Ausklang",
"href": "",
"image": ""
"href": ""
}, {
"start": "04:28:33.064",
"title": "Bonus Track",
"href": "",
"image": ""
"image": "https://picsum.photos/400/400/?random"
}],
"contributors": [{
"name": "Tim Pritlove",
Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,7 @@
"build": "npm run webpack:build",
"build:cdn": "npm run webpack:cdn",
"dev": "npm run dist:clean && npm run docs:dev && npm run webpack:dev",
"test": "npm run test:prepare && NODE_ENV=AVA nyc ava && nyc report",
"test": "npm run test:prepare && NODE_ENV=AVA nyc ava && nyc report --reporter=html",
"test:ci": "npm run test:prepare && NODE_ENV=AVA nyc ava --tap | tap-xunit > reports/ava.xml && nyc report --reporter=lcov",
"test:dev": "NODE_ENV=AVA ava --watch --fail-fast",
"test:prepare": "rm -rf reports coverage && mkdir -p reports coverage",
Expand Down
68 changes: 19 additions & 49 deletions src/components/header/Info.vue
Original file line number Diff line number Diff line change
@@ -1,10 +1,6 @@
<template>
<div class="info" id="header-info" v-if="hasPoster || hasShowTitle || hasEpisodeTitle || hasDescription">
<div class="poster" v-if="hasPoster" id="header-poster">
<div class="poster-container" :style="posterStyle">
<img class="poster-image" :src="episode.poster || show.poster" :alt="alternativeText" @error="onImageLoad">
</div>
</div>
<poster-component v-if="hasPoster"></poster-component>
<div class="description">
<h2 class="show-title" :style="titleStyle" v-if="hasShowTitle" id="header-showtitle">
<a :href="show.link" target="_blank" class="truncate" v-if="show.link">{{ show.title }}</a>
Expand All @@ -21,31 +17,32 @@

<script>
import { mapState, mapActions } from 'redux-vuex'
import selectors from 'store/selectors'
import color from 'color'
import PosterComponent from './Poster'
export default {
data: mapState('episode', 'show', 'theme', 'display', 'visibleComponents', 'components'),
data: mapState({
episode: 'episode',
show: 'show',
theme: 'theme',
display: 'display',
visibleComponents: 'visibleComponents',
components: 'components',
chapterPoster: selectors.selectCurrentChapterImage
}),
computed: {
titleStyle () {
return {
color: this.theme.player.title
}
},
posterStyle () {
return {
'border-color': this.theme.player.poster
}
},
subtitleStyle () {
return {
color: color(this.theme.player.text).fade(0.25)
}
},
hasPoster () {
return (this.episode.poster || this.show.poster) &&
this.visibleComponents.poster && this.components.header.poster
},
hasShowTitle () {
return this.show.title && this.visibleComponents.showTitle
},
Expand All @@ -55,53 +52,26 @@
hasDescription () {
return this.episode.subtitle && this.visibleComponents.subtitle
},
alternativeText () {
if (this.episode.poster) {
return this.$t('A11Y.ALT_EPISODE_COVER')
}
if (this.show.poster) {
return this.$t('A11Y.ALT_SHOW_COVER')
}
}
hasPoster () {
return (this.episode.poster || this.show.poster || this.chapterPoster) &&
this.visibleComponents.poster && this.components.header.poster
},
},
methods: mapActions({
onImageLoad: ({ dispatch, actions }) => {
dispatch(actions.toggleInfoPoster(false))
}
})
components: {
PosterComponent
}
}
</script>

<style lang="scss">
@import '~styles/variables';
$poster-size: 100px;
$description-height: 100px;
.info {
width: 100%;
display: flex;
flex-direction: row;
padding-top: $padding;
.poster {
margin: 0 $margin 0 0;
}
.poster-container {
height: $poster-size;
line-height: 0;
border-width: 2px;
border-style: solid;
.poster-image {
max-height: 100%;
max-width: none;
width: auto;
}
}
.title {
margin-top: 0;
margin-bottom: $margin / 4;
Expand Down
73 changes: 73 additions & 0 deletions src/components/header/Poster.vue
Original file line number Diff line number Diff line change
@@ -0,0 +1,73 @@
<template>
<div class="poster" id="header-poster">
<div class="poster-container" :style="posterStyle">
<img class="poster-image" :src="posterSrc" :alt="alternativeText" @error="onImageLoad">
</div>
</div>
</template>

<script>
import { mapState, mapActions } from 'redux-vuex'
import selectors from 'store/selectors'
export default {
data: mapState({
theme: 'theme',
episode: 'episode',
show: 'show',
components: 'components',
visibleComponents: 'visibleComponents',
chapterPoster: selectors.selectCurrentChapterImage,
playtime: 'playtime'
}),
computed: {
posterStyle () {
return {
'border-color': this.theme.player.poster
}
},
posterSrc () {
if (this.playtime === 0) {
return this.episode.poster || this.show.poster
}
return this.chapterPoster || this.episode.poster || this.show.poster
},
alternativeText () {
if (this.episode.poster) {
return this.$t('A11Y.ALT_EPISODE_COVER')
}
if (this.show.poster) {
return this.$t('A11Y.ALT_SHOW_COVER')
}
}
},
methods: mapActions({
onImageLoad: ({ dispatch, actions }) => {
dispatch(actions.toggleInfoPoster(false))
}
}),
}
</script>

<style lang="scss">
@import '~styles/variables';
.poster {
margin: 0 $margin 0 0;
}
.poster-container {
height: $poster-size;
line-height: 0;
border-width: 2px;
border-style: solid;
.poster-image {
max-height: 100%;
max-width: none;
width: auto;
}
}
</style>

34 changes: 14 additions & 20 deletions src/components/player/control-bar/ChapterBackButton.vue
Original file line number Diff line number Diff line change
Expand Up @@ -7,46 +7,40 @@

<script>
import { mapState, mapActions } from 'redux-vuex'
import { currentChapter, currentChapterIndex, previousChapter } from 'utils/chapters'
import selectors from 'store/selectors'
import ChapterBackIcon from 'icons/ChapterBackIcon'
export default {
components: {
ChapterBackIcon
},
data: mapState('chapters', 'theme', 'playtime'),
data: mapState({
chapters: 'chapters',
previousChapter: selectors.selectPreviousChapter,
currentChapter: selectors.selectCurrentChapter,
theme: 'theme',
playtime: 'playtime'
}),
computed: {
a11y () {
const chapter = currentChapter(this.chapters)
if (chapter.index === 1) {
return this.$t('A11Y.PLAYER_CHAPTER_CURRENT', { ...chapter })
if (this.currentChapter.index === 1) {
return this.$t('A11Y.PLAYER_CHAPTER_CURRENT', this.currentChapter)
}
if (this.playtime - chapter.start < 2000) {
return this.$t('A11Y.PLAYER_CHAPTER_PREVIOUS', { ...previousChapter(this.chapters) })
if (this.playtime - this.currentChapter.start < 2000) {
return this.$t('A11Y.PLAYER_CHAPTER_PREVIOUS', this.previousChapter)
}
return this.$t('A11Y.PLAYER_CHAPTER_CURRENT', { ...chapter })
return this.$t('A11Y.PLAYER_CHAPTER_CURRENT', this.currentChapter)
},
isDisabled () {
return this.playtime === 0
}
},
methods: mapActions({
onButtonClick: function ({ actions, dispatch }) {
const current = currentChapter(this.chapters)
const currentIndex = currentChapterIndex(this.chapters)
if (this.playtime - current.start <= 2) {
dispatch(actions.previousChapter())
} else {
dispatch(actions.setChapter(currentIndex))
}
}
onButtonClick: 'previousChapter'
})
}
</script>
Loading

0 comments on commit f4af652

Please sign in to comment.