Merge branch 'alexander-heimbuch-feature/sharing' into v4

* alexander-heimbuch-feature/sharing: add reference set time stamp improvements chapters improvements chapters fix sharing animation
podlove · Feb 12, 2017 · ea04267 · ea04267
2 parents b1e00b5 + 4cb2138
commit ea04267
Show file tree

Hide file tree

Showing 33 changed files with 539 additions and 249 deletions.
diff --git a/package.json b/package.json
@@ -61,6 +61,7 @@
   },
   "dependencies": {
     "blindparser": "^1.0.2",
+    "clipboard": "^1.6.0",
     "color": "^1.0.3",
     "detect-browser": "^1.6.2",
     "howler": "^2.0.2",

diff --git a/src/app.js b/src/app.js
@@ -1,6 +1,15 @@
 import Vue from 'vue'
 import head from 'lodash/head'
 
+import { timeToSeconds } from 'utils/time'
+
+
+import clipboard from './directives/clipboard'
+
+Vue.directive(
+    'clipboard', clipboard
+)
+
 // Store
 import store from 'store'
 import * as effects from './effects'
@@ -12,11 +21,12 @@ import mediaPlayer from './media-player'
 import App from './components/App.vue'
 
 
-export default meta => {
+export default config => {
   // Initialize meta for store
-  store.dispatch(store.actions.setMeta(meta))
+  store.dispatch(store.actions.init(config))
 
-  const media = mediaPlayer(meta.audio, {
+  const media = mediaPlayer(config.audio, {
+    playtime: timeToSeconds(config.playtime),
     setPlaytime: playtime => store.dispatch(store.actions.setPlaytime(playtime)),
     setBufferState: buffer => store.dispatch(store.actions.setBuffer(buffer)),
     setDuration: duration => store.dispatch(store.actions.setDuration(duration)),

diff --git a/src/components/App.vue b/src/components/App.vue
@@ -1,25 +1,40 @@
 <template>
-  <div class="podlove">
-    <PodloveHeader />
-    <PodlovePlayer />
+  <div class="podlove" :class="mode">
+    <div class="podlove-player--header" :style="headerStyle(theme)">
+      <PodloveInfo />
+      <PodlovePlayer />
+    </div>
     <PodloveTabs />
     <PodloveShareOverlay />
   </div>
 </template>
 
 <script>
-  import PodloveHeader from './header/Header.vue'
+  import PodloveInfo from './info/Info.vue'
   import PodlovePlayer from './player/Player.vue'
   import PodloveTabs from './tabs/Tabs.vue'
   import PodloveShareOverlay from './overlays/share/Share.vue'
 
+  const headerStyle = theme => ({
+    'background-color': theme.player.background
+  })
+
   export default {
     name: 'app',
+    data () {
+      return {
+        theme: this.$select('theme'),
+        mode: this.$select('mode')
+      }
+    },
     components: {
-      PodloveHeader,
+      PodloveInfo,
       PodlovePlayer,
       PodloveTabs,
       PodloveShareOverlay
+    },
+    methods: {
+      headerStyle
     }
   }
 </script>
@@ -36,5 +51,13 @@
     min-width: $width-xs;
 
     @include font();
+
+    &.share {
+      height: 100%;
+
+      .podlove-player--header {
+        height: calc(100% - #{$tabs-header-height});
+      }
+    }
   }
 </style>
diff --git a/src/components/icons/CopyIcon.vue b/src/components/icons/CopyIcon.vue
@@ -0,0 +1,11 @@
+<template>
+  <svg height="15px" width="15px" viewBox='0 0 1024 896' xmlns="http://www.w3.org/2000/svg">
+    <path :color="color" d="M128 768h256v64H128v-64z m320-384H128v64h320v-64z m128 192V448L384 640l192 192V704h320V576H576z m-288-64H128v64h160v-64zM128 704h160v-64H128v64z m576 64h64v128c-1 18-7 33-19 45s-27 18-45 19H64c-35 0-64-29-64-64V192c0-35 29-64 64-64h192C256 57 313 0 384 0s128 57 128 128h192c35 0 64 29 64 64v320h-64V320H64v576h640V768zM128 256h512c0-35-29-64-64-64h-64c-35 0-64-29-64-64s-29-64-64-64-64 29-64 64-29 64-64 64h-64c-35 0-64 29-64 64z" />
+  </svg>
+</template>
+
+<script>
+  export default {
+    props: ['color']
+  }
+</script>
diff --git a/src/components/header/Header.vue → src/components/info/Info.vue b/src/components/header/Header.vue → src/components/info/Info.vue
@@ -1,9 +1,15 @@
 <template>
-  <div class="podlove-header" :style="headerStyle(theme)">
-    <img class="podlove-header--poster" :src="poster" :style="posterStyle(theme)"/>
-    <div class="podlover-header--info">
-      <h1 class="podlove-header--title" :style="titleStyle(theme)">{{title}}</h1>
-      <div class="podlove-header--subtitle" :style="subtitleStyle(theme)">{{subtitle}}</div>
+  <div class="podlove-info">
+    <div class="podlove-info--header">
+      <div class="podlove-player--download"></div>
+      <div class="podlove-info--poster">
+        <img class="podlove-info--poster--image" :src="poster" :style="posterStyle(theme)"/>
+      </div>
+      <div class="podlove-player--share"><ShareButton /></div>
+    </div>
+    <div class="podlover-info--description">
+      <h1 class="podlove-info--title" :style="titleStyle(theme)">{{title}}</h1>
+      <div class="podlove-info--subtitle" :style="subtitleStyle(theme)">{{subtitle}}</div>
     </div>
   </div>
 </template>
@@ -12,9 +18,7 @@
   import store from 'store'
   import color from 'color'
 
-  const headerStyle = theme => ({
-    'background-color': theme.player.background
-  })
+  import ShareButton from '../overlays/share/ShareButton.vue'
 
   const posterStyle = theme => ({
     'border-color': theme.player.poster
@@ -37,8 +41,10 @@
         theme: this.$select('theme')
       }
     },
+    components: {
+      ShareButton
+    },
     methods: {
-      headerStyle,
       posterStyle,
       titleStyle,
       subtitleStyle
@@ -51,36 +57,51 @@
 
   $poster-size: 100px;
 
-  .podlove-header {
+  .podlove-info {
     padding: $padding;
-
+    height: calc(100% - #{$player-height});
     width: 100%;
     display: flex;
 
-    .podlove-header--poster {
-      display: block;
+    .podlove-info--header {
+      display: flex;
+      align-items: flex-start;
+      justify-content: space-between;
+    }
 
+    .podlove-info--poster {
+      display: flex;
+      justify-content: center;
+    }
+
+    .podlove-player--share, .podlove-player--download {
+      display: none;
+      justify-content: center;
+    }
+
+    .podlove-info--poster--image {
+      display: block;
       height: $poster-size;
       width: auto;
 
       margin-right: $margin;
       border: 2px solid;
     }
 
-    .podlover-header--info {
+    .podlover-info--description {
       padding: ($padding / 3) 0;
       max-height: $poster-size;
     }
 
-    .podlove-header--title {
+    .podlove-info--title {
       margin: 0 0 ($margin / 2) 0;
       padding: 0;
 
       font-size: 1.2rem;
       font-weight: 300;
     }
 
-    .podlove-header--subtitle {
+    .podlove-info--subtitle {
       max-height: 3.6rem;
       font-size: 0.9rem;
       line-height: 1.2rem;
@@ -89,16 +110,31 @@
       position: relative;
     }
 
+
     @media screen and (max-width: $width-l) {
       flex-direction: column;
       align-items: center;
       justify-content: center;
 
-      .podlove-header--title {
+      .podlove-info--header {
+        width: 100%;
+      }
+
+      .podlove-info--poster {
+        width: 50%;
+      }
+
+      .podlove-player--share, .podlove-player--download {
+        display: flex;
+        width: 25%;
+      }
+
+      .podlove-info--title {
         margin-top: $margin;
       }
 
-      .podlove-header--title, .podlove-header--subtitle {
+
+      .podlove-info--title, .podlove-info--subtitle {
         text-align: center;
       }
     }