Merge branch 'release/1.2.0'

heiseonline · Sep 9, 2019 · e059be1 · e059be1
2 parents 2ce2173 + 4e091e2
commit e059be1
Show file tree

Hide file tree

Showing 11 changed files with 865 additions and 617 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,9 @@
 # embetty
 
+## v1.2.0, 2019-09-09
+
+- improve video play button visibility
+
 ## v1.1.11, 2019-08-29
 
 - fix branch not permitted

diff --git a/index.js b/index.js
@@ -1 +1,7 @@
 export * from './lib/embetty'
+function debugEnabled() {
+  return window.localStorage.embettyDebug === 'true'
+}
+if (debugEnabled()) {
+  console.log('embetty-version: ' + require('./package.json').version)
+}
diff --git a/lib/embed.js b/lib/embed.js
@@ -1,4 +1,5 @@
 import { wait } from './util'
+import urljoin from 'url-join'
 
 // eslint-disable-next-line
 const EMBETTY_LOGO = require('!raw-loader!../assets/embetty.svg').toString()
@@ -21,7 +22,7 @@ export default class Embed extends window.HTMLElement {
   }
 
   _api(url) {
-    return this.serverUrl + url
+    return urljoin(this.serverUrl, url)
   }
 
   emit(name, data) {

diff --git a/lib/embed/_video.scss b/lib/embed/_video.scss
@@ -16,7 +16,7 @@
     }
   }
 
-  #playbutton {
+  #playbutton {  // id hardcoded in video.js
     box-sizing: border-box;
     display: block;
     position: absolute;
@@ -28,9 +28,17 @@
     background: none;
     cursor: pointer;
     transition: opacity 150ms;
+  }
+
+  .video-playbutton {
+    min-width: 3.75rem;
+    width: 13%;
+    max-width: 6rem;
+    transition: transform 300ms ease-out;
+    will-change: transform;
 
     &:hover {
-      opacity: 1;
+      transform: scale(1.07);
     }
   }
 

diff --git a/lib/embed/video.js b/lib/embed/video.js
@@ -65,8 +65,13 @@ export default class Video extends Observable(Embed) {
     return `
       <style>${CSS}</style>
       <button type="button" id="playbutton">
-        <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 48 48" fill="#fff">
-          <path d="M24 4C12.95 4 4 12.95 4 24s8.95 20 20 20 20-8.95 20-20S35.05 4 24 4zm-4 29V15l12 9-12 9z"/>
+        <svg xmlns="http://www.w3.org/2000/svg" width="72" height="72" viewBox="0 0 2000 2000" fill="#fff" class="video-playbutton">
+            <g transform="matrix(1.05356,0,0,1.03089,24.9824,-12.7689)">
+              <ellipse cx="925.453" cy="982.42" rx="906.453" ry="926.382" style="fill:black;fill-opacity:0.65;stroke:white;stroke-width:70px;"></ellipse>
+            </g>
+            <g transform="matrix(1.6783e-16,2.74087,-2.70471,1.65616e-16,2834.26,-542.169)">
+              <path d="M552.398,514.228C554.346,510.792 557.954,508.67 561.865,508.661C565.775,508.652 569.393,510.758 571.356,514.186C599.993,564.195 685.165,712.931 713.834,762.997C715.799,766.428 715.806,770.661 713.852,774.099C711.898,777.537 708.282,779.655 704.367,779.655L420.852,779.655C416.946,779.655 413.336,777.546 411.379,774.12C409.422,770.694 409.415,766.471 411.361,763.039C439.708,713.029 524.019,564.293 552.398,514.228Z" style="fill:white;"></path>
+            </g>
         </svg>
       </button>
       <div id="poster">

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@heise/embetty",
-  "version": "1.1.11",
+  "version": "1.2.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -49,14 +49,16 @@
     "registry": "https://registry.npmjs.org"
   },
   "dependencies": {
-    "babel-polyfill": "^6.26.0",
+    "core-js": "3",
     "hogan.js": "^3.0.2",
     "intersection-observer": "^0.7.0",
+    "regenerator-runtime": "^0.13.3",
+    "url-join": "^4.0.1",
     "whatwg-fetch": "^3.0.0"
   },
   "devDependencies": {
-    "@heise/embetty-server": "^1.0.0-beta.2",
-    "@webcomponents/webcomponentsjs": "^1.0.19",
+    "@heise/embetty-server": "^1.2.7",
+    "@webcomponents/webcomponentsjs": "^2.2.10",
     "autoprefixer": "^9.3.1",
     "babel-core": "^6.26.0",
     "babel-loader": "^7.1.2",

diff --git a/polyfills.js b/polyfills.js
@@ -1,4 +1,3 @@
-require('babel-polyfill')
 require('whatwg-fetch')
 
 try {
@@ -8,3 +7,5 @@ try {
 
 require('@webcomponents/webcomponentsjs')
 require('intersection-observer')
+require('core-js/stable')
+require('regenerator-runtime/runtime')
diff --git a/test/tweet.js b/test/tweet.js
@@ -2,7 +2,9 @@ import { createTweet } from './lib/util'
 import assert from 'assert'
 import Tweets from '@heise/embetty-base/test/tweets.json'
 
-afterEach(() => { document.body.innerHTML = '' })
+afterEach(() => {
+  document.body.innerHTML = ''
+})
 
 describe('Tweet', () => {
   it('should have a max width', async () => {
@@ -64,7 +66,9 @@ describe('Tweet', () => {
   describe('Tweet body', () => {
     it('should replace hash tags', async () => {
       const { query } = await createTweet(Tweets.hashTag.valid)
-      const a = query('article a[href="https://twitter.com/hashtag/Wochenende"]')
+      const a = query(
+        'article a[href="https://twitter.com/hashtag/Wochenende"]'
+      )
       assert.ok(a)
       assert.strictEqual(a.innerText, '#Wochenende')
     })

diff --git a/test/vimeo.js b/test/vimeo.js
@@ -8,7 +8,7 @@ describe('Vimeo Video', () => {
     const { query } = await createVimeoVideo('1084537')
     assert.strictEqual(
       query('img').getAttribute('src'),
-      '/video/vimeo/1084537-poster-image'
+      'video/vimeo/1084537-poster-image'
     )
   })
 

diff --git a/test/youtube.js b/test/youtube.js
@@ -8,7 +8,7 @@ describe('YouTube Video', () => {
     const { query } = await createYoutubeVideo('m6UOo2YGbIE')
     assert.strictEqual(
       query('img').getAttribute('src'),
-      '/video/youtube/m6UOo2YGbIE-poster-image'
+      'video/youtube/m6UOo2YGbIE-poster-image'
     )
   })