fix(internet-explorer): Add babel polyfills

- Switch order tabs
- Add ability to show larger images

package.json

@@ -1,8 +1,8 @@
 {
-  "name": "podlovewebapp",
-  "title": "PodloveWebPlayer",
+  "name": "podlove-web-player",
+  "title": "Podlove Web Player",
   "description": "a Podcast-optimized, HTML5-based video and audio player with Flash fallback. It can be used as a WordPress plugin or within a static HTML/JavaScript context.",
-  "version": "4.0.0-alpha",
+  "version": "4.0.0-beta.1",
   "homepage": "https://github.com/podlove/podlove-web-player",
   "contributors": [],
   "repository": "https://github.com/podlove/podlove-web-player.git",
@@ -48,14 +48,15 @@
     "changelog": "standard-changelog"
   },
   "dependencies": {
+    "babel-polyfill": "6.26.0",
     "bluebird": "3.5.0",
     "clipboard": "1.6.0",
     "color": "1.0.3",
     "detect-browser": "1.6.2",
     "foundation-sites": "6.3.1",
     "hashcode": "1.0.3",
     "howler": "2.0.3",
-    "html5-audio-driver": "^0.6.1",
+    "html5-audio-driver": "0.6.3",
     "iframe-resizer": "3.5.7",
     "keyboardjs": "2.3.3",
     "lodash": "4.17.4",
@@ -71,51 +72,52 @@
     "vue-i18n": "7.0.5"
   },
   "devDependencies": {
-    "autoprefixer-loader": "^3.2.0",
+    "autoprefixer-loader": "3.2.0",
     "ava": "0.18.2",
     "babel-core": "6.22.0",
-    "babel-loader": "^7.1.1",
+    "babel-loader": "7.1.1",
     "babel-plugin-add-module-exports": "0.2.1",
     "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",
+    "babel-preset-env": "1.6.0",
     "babel-preset-es2015": "6.22.0",
     "babel-preset-stage-2": "6.22.0",
     "babel-register": "6.22.0",
     "browser-env": "2.0.25",
     "commitizen": "2.9.6",
     "compression-webpack-plugin": "0.4.0",
-    "conventional-changelog-lint": "^1.1.9",
+    "conventional-changelog-lint": "1.1.9",
     "cross-env": "3.0.0",
     "css-loader": "0.25.0",
-    "cz-conventional-changelog": "^2.0.0",
-    "dev-ip": "^1.0.1",
+    "cz-conventional-changelog": "2.0.0",
+    "dev-ip": "1.0.1",
     "eslint-plugin-html": "3.0.0",
-    "extract-text-webpack-plugin": "^3.0.0",
-    "file-loader": "^0.11.2",
+    "extract-text-webpack-plugin": "3.0.0",
+    "file-loader": "0.11.2",
     "generate-changelog": "1.1.0",
-    "html-webpack-plugin": "^2.29.0",
-    "inject-loader": "^3.0.1",
+    "html-webpack-plugin": "2.29.0",
+    "inject-loader": "3.0.1",
     "lolex": "1.6.0",
     "node-sass": "4.1.1",
     "nyc": "10.1.2",
     "raw-loader": "0.5.1",
-    "sass-loader": "^6.0.6",
+    "sass-loader": "6.0.6",
     "semver": "5.3.0",
     "sinon": "2.1.0",
     "snazzy": "7.0.0",
     "standard": "10.0.2",
     "standard-changelog": "1.0.1",
     "surge": "0.18.0",
     "transform-runtime": "0.0.0",
-    "vue-loader": "^12.2.2",
-    "vue-template-compiler": "^2.4.2",
-    "webpack": "^3.4.1",
+    "vue-loader": "12.2.2",
+    "vue-template-compiler": "2.4.2",
+    "webpack": "3.4.1",
     "webpack-bundle-analyzer": "2.4.0",
     "webpack-dashboard": "0.3.0",
-    "webpack-dev-server": "^2.6.1"
+    "webpack-dev-server": "2.6.1"
   },
   "engines": {
     "node": ">=5.0.0"

src/components/header/Info.vue

@@ -67,10 +67,16 @@
     }
 
     .poster-container {
-      width: $poster-size;
+      height: $poster-size;
       line-height: 0;
       border-width: 2px;
       border-style: solid;
+
+      .poster-image {
+        max-height: 100%;
+        max-width: none;
+        width: auto;
+      }
     }
 
     .title {
@@ -121,7 +127,7 @@
       }
 
       .poster-container {
-        width: calc(100px + 3em); // Height of description
+        height: calc(100px + 3em); // Height of description
       }
     }
   }

src/components/shared/Button.vue

@@ -64,7 +64,7 @@
     }
 
     border-radius: 4px;
-    border-width: 2px;
+    border-width: 1px;
     border-style: solid;
 
     .inner {

src/components/tabs/Tabs.vue

@@ -1,6 +1,10 @@
 <template>
   <div class="tabs" :style="containerStyle" v-if="visibleTabs">
     <TabHeaderComponent>
+      <TabHeaderItemComponent v-if="components.tabs.info && components.tabs.info.visible" :active="tabs.info" :click="toggleTab('info')">
+        <InfoIcon slot="icon"></InfoIcon>
+        <span slot="title">{{ $t('INFO.TITLE') }}</span>
+      </TabHeaderItemComponent>
       <TabHeaderItemComponent v-if="components.tabs.chapters && components.tabs.chapters.visible" :active="tabs.chapters" :click="toggleTab('chapters')">
         <ChaptersIcon slot="icon"></ChaptersIcon>
         <span slot="title">{{ $t('CHAPTERS.TITLE') }}</span>
@@ -13,16 +17,15 @@
         <DownloadIcon slot="icon"></DownloadIcon>
         <span slot="title">{{ $t('DOWNLOAD.TITLE') }}</span>
       </TabHeaderItemComponent>
-      <TabHeaderItemComponent v-if="components.tabs.info && components.tabs.info.visible" :active="tabs.info" :click="toggleTab('info')">
-        <InfoIcon slot="icon"></InfoIcon>
-        <span slot="title">{{ $t('INFO.TITLE') }}</span>
-      </TabHeaderItemComponent>
       <TabHeaderItemComponent v-if="components.tabs.audio && components.tabs.audio.visible" :active="tabs.audio" :click="toggleTab('audio')">
         <AudioIcon slot="icon"></AudioIcon>
         <span slot="title">{{ $t('AUDIO.TITLE') }}</span>
       </TabHeaderItemComponent>
     </TabHeaderComponent>
 
+    <TabBodyComponent :active="tabs.info" v-if="components.tabs.info && components.tabs.info.visible">
+      <InfoTab></InfoTab>
+    </TabBodyComponent>
     <TabBodyComponent :active="tabs.chapters" v-if="components.tabs.chapters && components.tabs.chapters.visible">
       <ChaptersTab></ChaptersTab>
     </TabBodyComponent>
@@ -32,9 +35,6 @@
     <TabBodyComponent :active="tabs.download" v-if="components.tabs.download && components.tabs.download.visible">
       <DownloadTab></DownloadTab>
     </TabBodyComponent>
-    <TabBodyComponent :active="tabs.info" v-if="components.tabs.info && components.tabs.info.visible">
-      <InfoTab></InfoTab>
-    </TabBodyComponent>
     <TabBodyComponent :active="tabs.audio" v-if="components.tabs.audio && components.tabs.audio.visible">
       <AudioTab></AudioTab>
     </TabBodyComponent>

src/embed/embed.js

@@ -1,3 +1,4 @@
+import 'babel-polyfill'
 import { get, head, isString } from 'lodash'
 import Bluebird from 'bluebird'
 import browser from 'detect-browser'

src/embed/share.js

@@ -1,3 +1,4 @@
+import 'babel-polyfill'
 import { params } from 'utils/url'
 import remoteConfig from 'utils/request'
 

src/embed/window.js

@@ -1,3 +1,4 @@
+import 'babel-polyfill'
 import app from '../app'
 
 app(window.PODLOVE)

src/vendor.js

@@ -1,4 +1,6 @@
+// Vue
 import 'vue'
+import 'vue-i18n'
+import 'revue'
+
 import 'html5-audio-driver'
-import 'lodash'
-import 'ramda'

src/webpack.config.js

@@ -70,7 +70,7 @@ const config = {
 }
 
 if (process.env.NODE_ENV === 'production') {
-  config.devtool = '#source-map'
+  config.devtool = 'none'
 
   config.module.rules = [...config.module.rules, {
     test: /\.vue$/,
@@ -105,7 +105,11 @@ if (process.env.NODE_ENV === 'production') {
     new webpack.optimize.UglifyJsPlugin({
       sourceMap: false,
       compress: {
-        warnings: false
+        warnings: false,
+        dead_code: true
+      },
+      output: {
+        comments: false
       }
     }),
     new webpack.DefinePlugin({