Merge branch 'release/2.0.0'

heiseonline · Nov 4, 2019 · e81ea87 · e81ea87
2 parents 2ce2173 + 82246eb
commit e81ea87
Show file tree

Hide file tree

Showing 16 changed files with 2,161 additions and 1,735 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,14 @@
 # embetty
 
+## v2.0.0, 2019-11-04
+
+- embetty no longer includes the Twitter-thread by default
+- a new attribute `include-thread` was added to re-enable threads
+
+## v1.2.0, 2019-09-09
+
+- improve video play button visibility
+
 ## v1.1.11, 2019-08-29
 
 - fix branch not permitted

diff --git a/README.md b/README.md
@@ -67,6 +67,12 @@ Use the `status` attribute to embed a tweet with its tweet ID. Example:
 <embetty-tweet status="950371792874557440"></embetty-tweet>
 ```
 
+Use the `include-thread` attribute to include the thread _above_ the tweet (i.e. the conversation so far, for context). Example:
+
+```html
+<embetty-tweet status="950371792874557440" include-thread></embetty-tweet>
+```
+
 #### Video
 
 Use the `type` attribute with a value of `facebook`, `vimeo` or `youtube`. Set the `video-id` attribute to the video ID.

diff --git a/dev-server.js b/dev-server.js
@@ -1,8 +1,8 @@
 #!/usr/bin/env node
-
 const config = require('./webpack.config')
 const Embetty = require('@heise/embetty-base')
-const embettyRoutes = require('@heise/embetty-server/routes')
+const tweet = require('@heise/embetty-server/routes/tweet')
+const video = require('@heise/embetty-server/routes/video')
 const webpack = require('webpack')
 const WebpackDevServer = require('webpack-dev-server')
 
@@ -20,7 +20,8 @@ const server = new WebpackDevServer(webpack(config), {
   contentBase: './example',
   before: app => {
     app.set('embetty', new Embetty())
-    app.use(embettyRoutes)
+    app.use('/tweet', tweet)
+    app.use('/video', video)
   },
   disableHostCheck: true,
   stats: {

diff --git a/example/tweet.html b/example/tweet.html
@@ -47,6 +47,11 @@ <h2>Basic usage</h2>
       <embetty-tweet status="916618051906428928"></embetty-tweet>
     </article>
 
+    <article>
+      <pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;916618051906428928&quot; include-thread&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
+      <embetty-tweet status="916618051906428928" include-thread></embetty-tweet>
+    </article>
+
     <article>
       <pre><code class="language-html"><pre><code class="language-html">&lt;embetty-tweet status=&quot;936339584740454402&quot;&gt;&lt;/embetty-tweet&gt;</code></pre></code></pre>
       <embetty-tweet status="936339584740454402"></embetty-tweet>

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/tweet.js b/lib/embed/tweet.js
@@ -16,7 +16,7 @@ class Tweet extends Observable(Embed) {
   }
 
   appendAnsweredTweet() {
-    if (!this.isReply) return
+    if (!this.isReply || !this.hasAttribute('include-thread')) return
     const answered = new Tweet(this.answeredTweetId, this)
     answered.classList.add('answered')
     this.shadowRoot.insertBefore(answered, this.shadowRoot.firstChild)
@@ -57,7 +57,7 @@ class Tweet extends Observable(Embed) {
   }
 
   get createdAt() {
-    let createdAt = this._data.created_at.replace(/\+\d{4}\s/, '') // FU IE11
+    const createdAt = this._data.created_at.replace(/\+\d{4}\s/, '') // FU IE11
     return new Date(createdAt)
   }
 

diff --git a/lib/embed/video.js b/lib/embed/video.js
@@ -30,6 +30,7 @@ export default class Video extends Observable(Embed) {
 
   get Type() {
     const className = this.typeClass
+    // eslint-disable-next-line
     if (!Videos.hasOwnProperty(this.typeClass)) {
       console.error(`"${className}" does not exist.`)
       return
@@ -65,8 +66,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": "2.0.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {
@@ -11,7 +11,12 @@
     "dev": "./dev-server.js",
     "watch": "karma start",
     "test": "karma start --single-run",
-    "lint": "eslint ."
+    "lint": "eslint . --cache"
+  },
+  "husky": {
+    "hooks": {
+      "pre-commit": "yarn lint"
+    }
   },
   "author": {
     "name": "Philipp Busse",
@@ -49,30 +54,33 @@
     "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",
     "babel-plugin-transform-object-rest-spread": "^6.26.0",
     "babel-preset-env": "^1.6.1",
     "cache-loader": "^4.0.0",
     "css-loader": "^1.0.0",
-    "eslint": "^5.0.1",
-    "eslint-config-standard": "^12.0.0",
+    "eslint": "^6.5.1",
+    "eslint-config-standard": "^14.1.0",
     "eslint-plugin-import": "^2.7.0",
-    "eslint-plugin-node": "^7.0.1",
+    "eslint-plugin-node": "^10.0.0",
     "eslint-plugin-promise": "^4.0.0",
     "eslint-plugin-standard": "^4.0.0",
     "file-loader": "^4.0.0",
     "fs-extra": "^8.0.1",
     "gh-pages": "^2.0.1",
+    "husky": "^3.0.9",
     "karma": "^4.1.0",
     "karma-chrome-launcher": "^2.2.0",
     "karma-mocha": "^1.3.0",

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/lib/util.js b/test/lib/util.js
@@ -12,7 +12,7 @@ export const createElement = (tag, attrs) => {
   })
 }
 
-export const createTweet = status => createElement('embetty-tweet', { status })
+export const createTweet = (status, attrs = {}) => createElement('embetty-tweet', { status, ...attrs })
 
 export const createVideo = (videoId, type, attrs = {}) => {
   return createElement('embetty-video', { ...attrs, 'video-id': videoId, type })

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 () => {
@@ -57,14 +59,16 @@ describe('Tweet', () => {
     const { element } = await createTweet(Tweets.text)
     const links = [...element.shadowRoot.querySelectorAll('.tweet__link')]
     assert.strictEqual(links.length, 1)
-    assert.ok(links[0].getAttribute('href').includes('SiLVAFiSH'));
-    assert.ok(links[0].getAttribute('href').includes('934029337019416579'));
+    assert.ok(links[0].getAttribute('href').includes('SiLVAFiSH'))
+    assert.ok(links[0].getAttribute('href').includes('934029337019416579'))
   })
 
   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')
     })
@@ -81,5 +85,15 @@ describe('Tweet', () => {
       const text = element.fullText
       assert.ok(!text.includes('https://t.co/wLy5Asq3z0'))
     })
+
+    it('should show tweet only without include-thread attribute', async () => {
+      const { element } = await createTweet(Tweets.reply)
+      assert.strictEqual(element.shadowRoot.querySelector('embetty-tweet'), null)
+    })
+
+    it('should show tweet and thread due to include-thread attribute', async () => {
+      const { element } = await createTweet(Tweets.reply, { 'include-thread': '' })
+      assert.ok(element.shadowRoot.querySelector('embetty-tweet'))
+    })
   })
 })
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'
     )
   })