feat(share-link): Use a share link

.babelrc

@@ -1,6 +1,6 @@
 {
   "presets": ["es2015"],
-  "plugins": ["lodash"],
+  "plugins": ["lodash", "transform-object-rest-spread"],
   "env": {
     "AVA": {
       "plugins": [

docs/advanced.html

@@ -63,9 +63,11 @@ <h2>Store Actions</h2>
                         <tr><td>TOGGLE_TIMERMODE</td><td>Switches Timer Modes</td><td>remaining|duration</td></tr>
                         <tr><td>SET_THEME</td><td>Sets Player Theme</td><td>Theme Object</td></tr>
                         <tr><td>TOGGLE_SHARE</td><td>Toggles Share Overlay</td><td>-</td></tr>
-                        <tr><td>TOGGLE_SHARE_CUSTOMSTART</td><td>Toggles Sharing Custom Start Time</td><td>-</td></tr>
-                        <tr><td>SET_SHARE_CUSTOMSTARTTIME</td><td>Sets custom start time</td><td>Time (hh:mm:ss)</td></tr>
-                        <tr><td>SET_EMBED_DIMENSIONS</td><td>Sets custom start time</td><td>Dimensions (width x height)</td></tr>
+                        <tr><td>TOGGLE_SHARE_EMBED_START</td><td>Toggles sharing embed custom start</td><td>-</td></tr>
+                        <tr><td>TOGGLE_SHARE_LINK_START</td><td>Toggles sharing link custom start</td><td>-</td></tr>
+                        <tr><td>SET_SHARE_EMBED_STARTTIME</td><td>Sets embed start time</td><td>Time (hh:mm:ss)</td></tr>
+                        <tr><td>SET_SHARE_LINK_STARTTIME</td><td>Sets link start time</td><td>Time (hh:mm:ss)</td></tr>
+                        <tr><td>SET_SHARE_EMBED_SIZE</td><td>Sets embed size</td><td>Dimensions (width x height)</td></tr>
                         <tr><td>TOGGLE_TAB</td><td>Toggles a tab</td><td>chapters|settings</td></tr>
                     </tbody>
                 </table>

docs/standalone.html

@@ -53,7 +53,8 @@
             ],
             reference: {
                 config: '//podlove-player.surge.sh/fixtures/example.json',
-                share: '//podlove-player.surge.sh/share'
+                share: '//podlove-player.surge.sh/share',
+                origin: '//podlove-player.surge.sh/standalone.html'
             }
         }
     </script>

package.json

@@ -46,6 +46,7 @@
     "clipboard": "1.6.0",
     "color": "1.0.3",
     "detect-browser": "1.6.2",
+    "ent": "^2.2.0",
     "foundation-sites": "6.3.1",
     "hashcode": "1.0.3",
     "howler": "2.0.3",
@@ -65,6 +66,7 @@
     "babel-core": "6.22.0",
     "babel-loader": "7.0.0",
     "babel-plugin-lodash": "3.2.11",
+    "babel-plugin-transform-object-rest-spread": "^6.23.0",
     "babel-plugin-transform-runtime": "6.22.0",
     "babel-plugin-webpack-alias": "2.1.2",
     "babel-preset-bluebird": "1.0.1",

src/components/player/ProgressBar.vue

@@ -100,12 +100,6 @@
       opacity: 0;
       overflow: hidden;
     }
-
-    &.idle {
-      .progress-thumb {
-        opacity: 0;
-      }
-    }
   }
 
   .progress-range {

src/components/tabs/Tabs.vue

@@ -5,7 +5,7 @@
         <ChaptersIcon slot="icon"></ChaptersIcon>
         <span slot="title">Kapitel</span>
       </TabHeaderItem>
-      <TabHeaderItem v-if="reference.config && reference.share" :active="tabs.share" :click="toggleTab('share')">
+      <TabHeaderItem v-if="(reference.config && reference.share) || reference.origin" :active="tabs.share" :click="toggleTab('share')">
         <ShareIcon slot="icon"></ShareIcon>
         <span slot="title">Share</span>
       </TabHeaderItem>
@@ -17,7 +17,7 @@
     <TabBody :active="tabs.chapters" v-if="chapters.length > 0">
       <ChaptersTab />
     </TabBody>
-    <TabBody :active="tabs.share" v-if="reference.config && reference.share">
+    <TabBody :active="tabs.share" v-if="(reference.config && reference.share) || reference.origin">
       <ShareTab />
     </TabBody>
     <TabBody :active="tabs.settings">

src/components/tabs/settings/Settings.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="podlove-settings">
-    <div class="input">
+    <div class="seperator">
       <h4 class="label">
         <span class="title">Volume</span>
         <span class="volume">{{decimalToPercent(volume)}}%</span>
@@ -11,7 +11,7 @@
         <PodloveSlider class="input-slider" min="0" max="1" :value="volume" step="0.001" :onInput="setVolume" :thumbColor="theme.tabs.slider.thumb"></PodloveSlider>
       </div>
     </div>
-    <div class="input">
+    <div class="seperator">
       <h4 class="label">
         <span class="title">Speed</span>
         <span class="rate">{{decimalToPercent(rate)}}%</span>
@@ -56,6 +56,8 @@
   }
 
   const roundUp = (base, number) => {
+    number = Math.ceil(number)
+
     if (number % base === 0) {
       return number + base
     }
@@ -101,7 +103,6 @@
   @import 'inputs';
 
   $preset-width: 40px;
-  $button-size: 30px;
 
   .podlove-settings {
     width: 100%;
@@ -132,23 +133,5 @@
     .preset {
       width: $preset-width;
     }
-
-    .input-slider {
-      display: flex;
-      align-items: center;
-    }
-
-    .input-slider {
-      width: 100%;
-      margin-left: $margin / 2;
-    }
-
-    .slider-button {
-      font-weight: bold;
-      font-size: 1.2em;
-      height: $button-size;
-      width: $button-size;
-      margin-right: $margin / 2;
-    }
   }
 </style>

src/components/tabs/share/Share.vue

@@ -1,78 +1,13 @@
 <template>
   <div class="podlove-share">
-    <div class="embed">
-      <h4 class="title">Embed</h4>
-      <div class="input-row">
-        <input type="text" class="share-input share-copy" disabled :value="clipboardContent(reference, share, playtime)" />
-        <PodloveButton
-          class="share-copy-button"
-          :data-clipboard-text="clipboardContent(reference, share, playtime)"
-          v-clipboard
-          :style="buttonStyle(theme)">
-            copy
-        </PodloveButton>
-      </div>
-      <div class="input-row">
-        <div class="share-config--time">
-          <label class="input-label"><input type="checkbox" class="embed--checkbox" :value="share.customStart" v-on:change="toggleCustomStart(playtime)" /> Start:</label>
-          <input type="text" class="share-input" :value="secondsToTime(share.customStarttime)" v-on:input="setCustomStarttime"/>
-        </div>
-        <div class="share-config--size">
-          <label class="input-label">Size:</label>
-          <select class="share-input" v-model="share.dimensions" v-on:change="setDimensions(share.dimensions)">
-            <option v-for="option in sizeOptions" v-bind:value="option">
-              {{ option }}
-            </option>
-          </select>
-        </div>
-      </div>
-    </div>
+    <ShareLink class="seperator" v-if="reference.origin"></ShareLink>
+    <ShareEmbed v-if="reference.config && reference.share"></ShareEmbed>
   </div>
 </template>
 
 <script>
-  import {debounce, get} from 'lodash'
-  import PodloveButton from 'shared/Button.vue'
-
-  import store from 'store'
-  import {secondsToTime, timeToSeconds} from 'utils/time'
-
-  const clipboardContent = (reference, share, playtime) => {
-    const [width, height] = share.dimensions.split('x')
-    let time = share.customStart ? `&playtime=${secondsToTime(share.customStarttime)}` : ''
-
-    return `<iframe width="${width}" height="${height}" src="${reference.share}?episode=${reference.config}${time}" frameborder="0" scrolling="no"></iframe>`
-  }
-
-  // Sharing
-  const setDimensions = dimensions => {
-    store.dispatch(store.actions.setEmbedDimensions(dimensions))
-  }
-
-  const toggleCustomStart = (time) => {
-    store.dispatch(store.actions.toggleShareCustomStart())
-    store.dispatch(store.actions.setCustomStarttime(time))
-  }
-
-  const setCustomStarttime = debounce(input => {
-    const duration = get(store.store.getState(), 'duration')
-    let time = timeToSeconds(input.target.value)
-
-    if (!time) {
-      return
-    }
-
-    if (time > duration) {
-      time = duration
-    }
-
-    store.dispatch(store.actions.setCustomStarttime(time))
-  }, 1000)
-
-  const buttonStyle = (theme) => ({
-    color: theme.tabs.button.text,
-    background: theme.tabs.button.background
-  })
+  import ShareLink from './ShareLink.vue'
+  import ShareEmbed from './ShareEmbed.vue'
 
   export default {
     data() {
@@ -81,94 +16,12 @@
         reference: this.$select('reference'),
         playtime: this.$select('playtime'),
         duration: this.$select('duration'),
-        sizeOptions: ['250x400', '320x400', '375x400', '600x290', '768x290'],
         theme: this.$select('theme')
       }
     },
-    methods: {
-      setDimensions,
-      clipboardContent,
-      secondsToTime,
-      toggleCustomStart,
-      setCustomStarttime,
-      buttonStyle
-    },
     components: {
-      PodloveButton
+      ShareLink,
+      ShareEmbed
     }
   }
-
 </script>
-
-<style lang="scss">
-  @import 'variables';
-  @import 'utils';
-  @import 'inputs';
-
-  $embed-width: 40px;
-  $embed-height: 35px;
-  $size-button-width: 80px;
-
-  .podlove-share {
-    padding: $padding;
-
-    .share-input {
-      display: inline-block;
-      resize: none;
-      padding: $padding / 4;
-      border-color: rgba($accent-color, 0.8);
-      border-width: 1px;
-      border-radius: 2px;
-    }
-
-    .share-copy {
-      padding: $padding / 2;
-      width: calc(100% - #{$embed-width});
-      border-radius: 2px 0 0 2px;
-      font-size: 1em;
-      border-width: 1px 0 1px 1px;
-      height: $embed-height;
-    }
-
-    .share-copy-button {
-      cursor: pointer;
-
-      display: flex;
-      align-items: center;
-      justify-content: center;
-
-      height: $embed-height;
-      width: $embed-width;
-      border: 1px solid rgba($accent-color, 0.8);
-
-      opacity: 1;
-
-      &:hover {
-        opacity: 0.8;
-      }
-    }
-
-    .share-config--time, .share-config--size {
-      line-height: 1em;
-    }
-
-    .input-row {
-      display: flex;
-      justify-content: space-between;
-      margin-bottom: $margin / 2;
-    }
-
-    .input-label {
-      margin-bottom: $margin / 4;
-    }
-
-    @media screen and (max-width: $width-m) {
-      .share-config--time, .share-config--size {
-        .input-label {
-          display: block;
-        }
-      }
-    }
-  }
-
-</style>