feat(info): Set links in embed mode

- Links in embed mode #394 - Adapt audio tab icon to represent current audio state - BREAKING CHANGE: show.url is now show.link
podlove · Jul 2, 2017 · 05b8778 · 05b8778
1 parent 48af868
commit 05b8778
Show file tree

Hide file tree

Showing 22 changed files with 372 additions and 306 deletions.
diff --git a/docs/config.md b/docs/config.md
@@ -12,16 +12,16 @@ navigation: 4
 | show.subtitle  | Show Description  |
 | show.summary | Show Summary |
 | show.poster | Show Cover |
-| show.url | Url to show |
+| show.link | Url to show |
 
 ```javascript
 {
     show: {
-        title: 'Freak Show',
-        subtitle: 'Menschen! Technik! Sensationen!',
-        summary: 'Die muntere Talk Show um Leben mit Technik, das Netz und Technikkultur. Bisweilen Apple-lastig aber selten einseitig. Wir leben und lieben Technologie und reden darüber. Mit Tim, hukl, roddi, Clemens und Denis. Freak Show hieß irgendwann mal mobileMacs.',
-        poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
-        url: 'https://freakshow.fm'
+      title: 'Freak Show',
+      subtitle: 'Menschen! Technik! Sensationen!',
+      summary: 'Die muntere Talk Show um Leben mit Technik, das Netz und Technikkultur. Bisweilen Apple-lastig aber selten einseitig. Wir leben und lieben Technologie und reden darüber. Mit Tim, hukl, roddi, Clemens und Denis. Freak Show hieß irgendwann mal mobileMacs.',
+      poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
+      link: 'https://freakshow.fm'
     }
 }
 ```
@@ -34,15 +34,17 @@ navigation: 4
 | poster | Episode Cover |
 | publicationDate | Episode Publication Date |
 | duration | Episode Duration |
+| link | Link to Episode |
 
 ```javascript
 {
-    title: 'FS171 Invasion!',
-    subtitle: 'LAN Planung - Kalender - Bingo - Wikipedia - Akkukalibration - Alte iPads und iPods - Find My Friends - iPhone Music Player - Apple Watch - Kommandozeile - Star Wars - Dante - Internet of Things Security - VPN',
-    summary: 'Wir haben eine wie wir finden abwechslungsreiche Sendung produziert, die wir Euch wie immer mit Freude bereitstellen. Während die Live-Hörer Freak-Show-Bingo spielen, greifen wir das Wikipedia-Thema der letzten Sendung auf und liefern auch noch weitere Aspekte des optimalen Star-Wars-Medienkonsums frei Haus. Dazu viel Nerderei rund um die Kommandozeile, eine Einschätzung der Perspektive der Apple Watch, ein Rant über die mangelhafte Security  im Internet of Things (and Buildings) und allerlei anderer Kram.  Roddi setzt dieses Mal aus, sonst Vollbesetzung.',
-    publicationDate: '2016-02-11T03:13:55+00:00',
-    poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
-    duration: '04:15:32'
+  title: 'FS171 Invasion!',
+  subtitle: 'LAN Planung - Kalender - Bingo - Wikipedia - Akkukalibration - Alte iPads und iPods - Find My Friends - iPhone Music Player - Apple Watch - Kommandozeile - Star Wars - Dante - Internet of Things Security - VPN',
+  summary: 'Wir haben eine wie wir finden abwechslungsreiche Sendung produziert, die wir Euch wie immer mit Freude bereitstellen. Während die Live-Hörer Freak-Show-Bingo spielen, greifen wir das Wikipedia-Thema der letzten Sendung auf und liefern auch noch weitere Aspekte des optimalen Star-Wars-Medienkonsums frei Haus. Dazu viel Nerderei rund um die Kommandozeile, eine Einschätzung der Perspektive der Apple Watch, ein Rant über die mangelhafte Security  im Internet of Things (and Buildings) und allerlei anderer Kram.  Roddi setzt dieses Mal aus, sonst Vollbesetzung.',
+  publicationDate: '2016-02-11T03:13:55+00:00',
+  poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
+  duration: '04:15:32',
+  link: 'https://freakshow.fm/fs171-invasion'
 }
 ```
 
@@ -56,29 +58,29 @@ _Not providing chapters will disable all chapter related functions._
 ```javascript
 {
     chapters: [
-        { start:"00:00:00", title: 'Intro'},
-        { start:"00:01:39", title: 'Begrüßung'},
-        { start:"00:04:58", title: 'IETF Meeting Netzwerk'},
-        { start:"00:18:37", title: 'Kalender'},
-        { start:"00:33:40", title: 'Freak Show Bingo'},
-        { start:"00:35:37", title: 'Wikipedia'},
-        { start:"01:17:26", title: 'iPhone Akkukalibration'},
-        { start:"01:24:55", title: 'Alte iPads und iPod touches'},
-        { start:"01:31:02", title: 'Find My Friends'},
-        { start:"01:41:46", title: 'iPhone Music Player'},
-        { start:"01:56:13", title: 'Apple Watch'},
-        { start:"02:11:51", title: 'Kommandozeile: System Appreciation'},
-        { start:"02:23:10", title: 'Sound und Design für Games'},
-        { start:"02:24:59", title: 'Kommandozeile: Remote Deployment'},
-        { start:"02:32:37", title: 'Kommandozeile: Man Pages'},
-        { start:"02:44:31", title: 'Kommandozeile: screen vs. tmux'},
-        { start:"02:58:02", title: 'Star Wars: Machete Order & Phantom Edit'},
-        { start:"03:20:05", title: 'Kopfhörer-Ersatzteile'},
-        { start:"03:23:39", title: 'Dante'},
-        { start:"03:38:03", title: 'Dante Via'},
-        { start:"03:45:33", title: 'Internet of Things Security'},
-        { start:"03:56:11", title: 'That One Privacy Guy\'s VPN Comparison Chart'},
-        { start:"04:10:00", title: 'Ausklang'}
+      { start:"00:00:00", title: 'Intro'},
+      { start:"00:01:39", title: 'Begrüßung'},
+      { start:"00:04:58", title: 'IETF Meeting Netzwerk'},
+      { start:"00:18:37", title: 'Kalender'},
+      { start:"00:33:40", title: 'Freak Show Bingo'},
+      { start:"00:35:37", title: 'Wikipedia'},
+      { start:"01:17:26", title: 'iPhone Akkukalibration'},
+      { start:"01:24:55", title: 'Alte iPads und iPod touches'},
+      { start:"01:31:02", title: 'Find My Friends'},
+      { start:"01:41:46", title: 'iPhone Music Player'},
+      { start:"01:56:13", title: 'Apple Watch'},
+      { start:"02:11:51", title: 'Kommandozeile: System Appreciation'},
+      { start:"02:23:10", title: 'Sound und Design für Games'},
+      { start:"02:24:59", title: 'Kommandozeile: Remote Deployment'},
+      { start:"02:32:37", title: 'Kommandozeile: Man Pages'},
+      { start:"02:44:31", title: 'Kommandozeile: screen vs. tmux'},
+      { start:"02:58:02", title: 'Star Wars: Machete Order & Phantom Edit'},
+      { start:"03:20:05", title: 'Kopfhörer-Ersatzteile'},
+      { start:"03:23:39", title: 'Dante'},
+      { start:"03:38:03", title: 'Dante Via'},
+      { start:"03:45:33", title: 'Internet of Things Security'},
+      { start:"03:56:11", title: 'That One Privacy Guy\'s VPN Comparison Chart'},
+      { start:"04:10:00", title: 'Ausklang'}
     ]
 }
 ```
@@ -88,10 +90,10 @@ _Not providing chapters will disable all chapter related functions._
 ```javascript
 {
     audio: [
-        'http://freakshow.fm/podlove/file/4468/s/download/c/select-show/fs171-invasion.m4a',
-        'http://freakshow.fm/podlove/file/4467/s/download/c/select-show/fs171-invasion.mp3',
-        'http://freakshow.fm/podlove/file/4466/s/download/c/select-show/fs171-invasion.oga',
-        'http://freakshow.fm/podlove/file/4465/s/download/c/select-show/fs171-invasion.opus'
+      'http://freakshow.fm/podlove/file/4468/s/download/c/select-show/fs171-invasion.m4a',
+      'http://freakshow.fm/podlove/file/4467/s/download/c/select-show/fs171-invasion.mp3',
+      'http://freakshow.fm/podlove/file/4466/s/download/c/select-show/fs171-invasion.oga',
+      'http://freakshow.fm/podlove/file/4465/s/download/c/select-show/fs171-invasion.opus'
     ]
 }
 ```
@@ -105,9 +107,9 @@ _Not providing chapters will disable all chapter related functions._
 ```javascript
 {
     reference: {
-        base: '//podlove-player.surge.sh',
-        config: '//podlove-player.surge.sh/fixtures/example.json',
-        share: '//podlove-player.surge.sh/share'
+      base: '//podlove-player.surge.sh',
+      config: '//podlove-player.surge.sh/fixtures/example.json',
+      share: '//podlove-player.surge.sh/share'
     }
 }
 ```
@@ -120,8 +122,8 @@ _Not providing chapters will disable all chapter related functions._
 ```javascript
 {
     theme: {
-        main: '#2B8AC6',
-        highlight: '#EC79F2'
+      main: '#2B8AC6',
+      highlight: '#EC79F2'
     }
 }
 ```
@@ -134,8 +136,8 @@ _Not providing chapters will disable all chapter related functions._
 ```javascript
 {
     runtime: {
-        platform: 'desktop',
-        language: 'en'
+      platform: 'desktop',
+      language: 'en'
     }
 }
 ```
diff --git a/docs/standalone.html b/docs/standalone.html
@@ -10,14 +10,14 @@
             title: 'FS171 Invasion!',
             subtitle: 'LAN Planung - Kalender - Bingo - Wikipedia - Akkukalibration - Alte iPads und iPods - Find My Friends - iPhone Music Player - Apple Watch - Kommandozeile - Star Wars - Dante - Internet of Things Security - VPN',
             summary: 'Wir haben eine wie wir finden abwechslungsreiche Sendung produziert, die wir Euch wie immer mit Freude bereitstellen. Während die Live-Hörer Freak-Show-Bingo spielen, greifen wir das Wikipedia-Thema der letzten Sendung auf und liefern auch noch weitere Aspekte des optimalen Star-Wars-Medienkonsums frei Haus. Dazu viel Nerderei rund um die Kommandozeile, eine Einschätzung der Perspektive der Apple Watch, ein Rant über die mangelhafte Security  im Internet of Things (and Buildings) und allerlei anderer Kram.  Roddi setzt dieses Mal aus, sonst Vollbesetzung.',
-            publicationDate: '2016-02-11T03:13:55+00:00',
+            link: 'https://freakshow.fm/fs171-invasion',
             poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
             show: {
                 title: 'Freak Show',
                 subtitle: 'Menschen! Technik! Sensationen!',
                 summary: 'Die muntere Talk Show um Leben mit Technik, das Netz und Technikkultur. Bisweilen Apple-lastig aber selten einseitig. Wir leben und lieben Technologie und reden darüber. Mit Tim, hukl, roddi, Clemens und Denis. Freak Show hieß irgendwann mal mobileMacs.',
                 poster: 'https://freakshow.fm/wp-content/cache/podlove/04/662a9d4edcf77ea2abe3c74681f509/freak-show_200x200.jpg',
-                url: 'https://freakshow.fm'
+                link: 'https://freakshow.fm'
             },
             duration: '04:15:32',
             chapters: [

diff --git a/docs/theme.md b/docs/theme.md
@@ -70,6 +70,16 @@ navigation: 3
 
 </script>
 
+<p>
+<pre id="theme-config">
+  {
+    theme: {
+      main: "#2B8AC6"
+    }
+  }
+</pre>
+</p>
+
 <div class="container">
     <div class="row">
         <div class="column">
@@ -83,18 +93,8 @@ navigation: 3
     </div>
 </div>
 
-<p>
-<pre id="theme-config">
-  {
-    theme: {
-      main: "#2B8AC6"
-    }
-  }
-</pre>
-</p>
-
 ## Color Calculation
 
 The player requires at least one main color. If not provided the default color will be used.
-Without setting a highlight color the essential control elements are colored black or white depending on a calculated <a href="https://www.w3.org/TR/WCAG20/#contrast-ratiodef">WCGA contrast ratio</a>.
+Without setting a highlight color the essential control elements are colored black or white depending on a calculated [WCGA contrast ratio](https://www.w3.org/TR/WCAG20/#contrast-ratiodef).
 With a highlight color in place these control elements will be colored accordingly.
diff --git a/src/components/App.vue b/src/components/App.vue
@@ -1,8 +1,8 @@
 <template>
-  <div class="podlove" :class="{[mode]: mode, [runtime.platform]: runtime.platform}">
-    <HeaderComponent />
-    <PlayerComponent />
-    <TabsComponent />
+  <div class="podlove" :class="{[display]: display, [runtime.platform]: runtime.platform}">
+    <HeaderComponent></HeaderComponent>
+    <PlayerComponent></PlayerComponent>
+    <TabsComponent></TabsComponent>
   </div>
 </template>
 
@@ -18,7 +18,7 @@
       this.$i18n.locale = this.$select('runtime.language')
 
       return {
-        mode: this.$select('mode'),
+        display: this.$select('display'),
         runtime: this.$select('runtime')
       }
     },
@@ -41,7 +41,7 @@
   @import 'global';
   @import 'font';
 
-  @import 'share';
+  @import 'embed';
   @import 'utils';
   @import 'grid';
 

diff --git a/src/components/header/Header.vue b/src/components/header/Header.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="header" :style="backgroundStyle(theme)">
-    <PodloveError v-if="components.error"/>
-    <PodloveInfo v-if="components.info"/>
+    <PodloveError v-if="components.error"></PodloveError>
+    <PodloveInfo v-if="components.info"></PodloveInfo>
   </div>
 
 </template>

diff --git a/src/components/header/Info.vue b/src/components/header/Info.vue
@@ -1,25 +1,27 @@
 <template>
   <div class="info" >
-    <div class="poster" v-if="poster">
-      <div class="poster-container" :style="posterStyle(theme)">
-          <img class="poster-image" :src="poster" />
+    <div class="poster" v-if="episode.poster || show.poster">
+      <div class="poster-container">
+        <img class="poster-image" :src="episode.poster || show.poster">
       </div>
     </div>
     <div class="description">
-      <h2 class="show-title truncate" :style="titleStyle(theme)">{{showTitle}}</h2>
-      <h1 class="title truncate" :style="titleStyle(theme)">{{title}}</h1>
-      <div class="subtitle" :style="subtitleStyle(theme)">{{subtitle}}</div>
+      <h2 class="show-title truncate" :style="titleStyle(theme)" v-if="show.title">
+        <a :href="show.link" target="_blank" v-if="display === 'embed' && show.link">{{show.title}}</a>
+        <span v-else>{{show.title}}</span>
+      </h2>
+      <h1 class="title truncate" :style="titleStyle(theme)" v-if="episode.title">
+        <a :href="episode.link" target="_blank" v-if="display === 'embed' && episode.link">{{episode.title}}</a>
+        <span v-else>{{episode.title}}</span>
+      </h1>
+      <div class="subtitle" :style="subtitleStyle(theme)" v-if="episode.subtitle">{{episode.subtitle}}</div>
     </div>
   </div>
 </template>
 
 <script>
   import color from 'color'
 
-  const posterStyle = theme => ({
-    'border-color': theme.player.poster
-  })
-
   const titleStyle = theme => ({
     color: theme.player.title
   })
@@ -31,15 +33,13 @@
   export default {
     data () {
       return {
-        poster: this.$select('poster'),
-        title: this.$select('title'),
-        showTitle: this.$select('showTitle'),
-        subtitle: this.$select('subtitle'),
-        theme: this.$select('theme')
+        episode: this.$select('episode'),
+        show: this.$select('show'),
+        theme: this.$select('theme'),
+        display: this.$select('display')
       }
     },
     methods: {
-      posterStyle,
       titleStyle,
       subtitleStyle
     }
@@ -63,7 +63,6 @@
 
     .poster-container {
       width: $poster-size;
-      border: 2px solid;
       line-height: 0;
     }
 

diff --git a/src/components/player/progress-bar/ProgressBar.vue b/src/components/player/progress-bar/ProgressBar.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="progress-bar">
-    <ProgressComponent />
-    <TimerComponent />
+    <ProgressComponent></ProgressComponent>
+    <TimerComponent></TimerComponent>
   </div>
 </template>
 

diff --git a/src/components/shared/TabBody.vue b/src/components/shared/TabBody.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tab-body" :class="{active}" :style="bodyStyle(theme)">
+  <div class="tab-body" :class="{active}" :style="display === 'native' ? bodyStyle(theme) : {}">
     <slot></slot>
   </div>
 </template>
@@ -12,7 +12,8 @@
     props: ['active'],
     data () {
       return {
-        theme: this.$select('theme')
+        theme: this.$select('theme'),
+        display: this.$select('display')
       }
     },
     methods: {