Merge branch 'release/1.1.0'

* release/1.1.0:
  bump 1.1.0
  support [start-at] in youtube/vimeo videos
  upgrade dependencies
  update vimeo test
  update video.html
  add vimeo test
  add start-at to vimeo && add vimeo test
  update youtube video test
  Add start-at attribute to video
  document events
  update changelog
  remove cruft
  Fix #16 Image Cut on left and right size
  upgrade deps
  update changelog
  fix typo
  update changelog
  mention caveats in readme
  Add extra activated event

.gitignore

@@ -20,6 +20,7 @@ logs
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+tags
 
 # Runtime data
 pids

CHANGELOG.md

@@ -1,5 +1,14 @@
 # embetty
 
+## v1.1.0, 2018-06-27
+
+- Added events section to readme.
+- Added caveats section to readme.
+- Added `activated` event to videos. (rbraband)
+- Added support for `start-at` to youtube and vimeo videos.
+- Fixed images in tweets being cut off on the left side. (rbraband)
+- Upgraded dependencies.
+
 ## v1.0.6, 2018-06-07
 
 - Added link to [demo](https://heiseonline.github.io/embetty/) to readme. (schliflo)

README.md

@@ -77,6 +77,26 @@ Use the `type` attribute with a value of `facebook`, `vimeo` or `youtube`. Set t
 <embetty-video type="facebook" video-id="10156049485672318"></embetty-video>
 ```
 
+### Events
+
+Embetty triggers the following events:
+
+| Name | Description |
+|------|-------------|
+| `initialized` | The Embetty embed will enter the viewport *after* this has been triggered. |
+| `activated` | The Embetty **video** embed has been replaced with an iframe containing the original video player. The content of the iframe may still be loading. |
+
+Example code:
+
+```js
+document.querySelector('embetty-tweet').addEventistener('initialized', function(e) { ... })
+```
+
+## Caveats
+
+The Embetty server component **does not proxy video data**
+. This means that **the tracking protection becomes ineffective after the play button has been clicked**.
+
 ## License
 
 Embetty is [MIT licensed](./LICENSE).

example/video.html

@@ -15,31 +15,30 @@ <h2>Basic usage</h2>
   </header>
   <main>
 
-    <h3>Youtube</h3>
+    <h3>YouTube</h3>
 
     <article>
-      <embetty-video type="youtube" video-id="m6UOo2YGbIE"></embetty-video>
-      <pre><code class="language-html">&lt;embetty-video video-id=&quot;m6UOo2YGbIE&quot type=&quot;youtube&quot;&gt;&lt;/embetty-video&gt;</code></pre>
+      <embetty-video type="youtube" start-at="97" video-id="m6UOo2YGbIE"></embetty-video>
+      <pre><code class="language-html">&lt;embetty-video video-id=&quot;m6UOo2YGbIE&quot; start-at=&quot;97&quot; type=&quot;youtube&quot;&gt;&lt;/embetty-video&gt;</code></pre>
     </article>
 
     <article>
       <embetty-video height=100 type="youtube" video-id="3L4fHrIJ3A4"></embetty-video>
-      <pre><code class="language-html">&lt;embetty-video video-id=&quot;3L4fHrIJ3A4&quot type=&quot;youtube&quot;&gt;&lt;/embetty-video&gt;</code></pre>
+      <pre><code class="language-html">&lt;embetty-video video-id=&quot;3L4fHrIJ3A4&quot; type=&quot;youtube&quot;&gt;&lt;/embetty-video&gt;</code></pre>
     </article>
 
-    <hr>
-
-    <h4>Vimeo</h4>
+    <h3>Vimeo</h3>
 
     <article>
-      <embetty-video type="vimeo" video-id="1084537"></embetty-video>
-      <pre><code class="language-html">&lt;embetty-video video-id=&quot;1084537&quot type=&quot;vimeo&quot;&gt;&lt;/embetty-video&gt;</code></pre>
+      <embetty-video type="vimeo" start-at="97" video-id="1084537"></embetty-video>
+      <pre><code class="language-html">&lt;embetty-video video-id=&quot;1084537&quot; start-at=&quot;97&quot; type=&quot;vimeo&quot;&gt;&lt;/embetty-video&gt;</code></pre>
     </article>
 
-    <h4>Facebook</h4>
+    <h3>Facebook</h3>
+
     <article>
       <embetty-video type="facebook" video-id="10156049485672318"></embetty-video>
-      <pre><code class="language-html">&lt;embetty-video video-id=&quot;10156049485672318&quot type=&quot;facebook&quot;&gt;&lt;/embetty-video&gt;</code></pre>
+      <pre><code class="language-html">&lt;embetty-video video-id=&quot;10156049485672318&quot; type=&quot;facebook&quot;&gt;&lt;/embetty-video&gt;</code></pre>
     </article>
   </main>
 </body>

lib/embed/tweet.scss

@@ -100,8 +100,9 @@ $quoteLineWidth: 4px;
 
   #media {
     a {
-      display: block;
       height: 100%;
+      display: flex;
+      align-items: center;
 
       &:not(:first-child) {
         display: none;

lib/embed/video.js

@@ -16,6 +16,7 @@ export default class Video extends Observable(Embed) {
 
   activate() {
     this.shadowRoot.innerHTML = this.impl.iframe
+    this.emit('activated')
   }
 
   get playButton() {
@@ -51,6 +52,10 @@ export default class Video extends Observable(Embed) {
     return this.impl.posterImageUrl
   }
 
+  get startAt() {
+    return this.getAttribute('start-at') || 0
+  }
+
   static get css() {
     return CSS
   }

lib/embed/video/type/vimeo.js

@@ -17,7 +17,7 @@ export class VimeoVideo extends BaseType {
       <style>${CSS}</style>
       <div class="wrapper">
         <iframe
-          src="https://player.vimeo.com/video/${this.element.videoId}?autoplay=1"
+          src="https://player.vimeo.com/video/${this.element.videoId}?autoplay=1#t=${this.element.startAt}"
           width="${this.width}"
           height="${this.height}"
           frameborder="0"

lib/embed/video/type/youtube.js

@@ -21,7 +21,7 @@ export class YoutubeVideo extends BaseType {
           type="text/html"
           width="${this.width}"
           height="${this.height}"
-          src="//www.youtube-nocookie.com/embed/${this.element.videoId}?autoplay=1"
+          src="//www.youtube-nocookie.com/embed/${this.element.videoId}?autoplay=1&start=${this.element.startAt}"
           frameborder="0"
         ></iframe>
       </div>

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@heise/embetty",
-  "version": "1.0.6",
+  "version": "1.1.0",
   "main": "index.js",
   "license": "MIT",
   "scripts": {

test/lib/util.js

@@ -14,8 +14,9 @@ export const createElement = (tag, attrs) => {
 
 export const createTweet = status => createElement('embetty-tweet', {status})
 
-export const createVideo = (videoId, type) => {
-  return createElement('embetty-video', {'video-id': videoId, type})
+export const createVideo = (videoId, type, attrs = {}) => {
+  return createElement('embetty-video', {...attrs, 'video-id': videoId, type})
 }
 
-export const createYoutubeVideo = videoId => createVideo(videoId, 'youtube')
+export const createYoutubeVideo = (videoId, attrs) => createVideo(videoId, 'youtube', attrs)
+export const createVimeoVideo = (videoId, attrs) => createVideo(videoId, 'vimeo', attrs)

test/vimeo.js

@@ -0,0 +1,28 @@
+import {createVimeoVideo} from './lib/util'
+import assert from 'assert'
+
+afterEach(() => { document.body.innerHTML = '' })
+
+describe('Vimeo Video', () => {
+  it('should provide the poster image', async () => {
+    const {query} = await createVimeoVideo('1084537')
+    assert.equal(
+      query('img').getAttribute('src'),
+      '/video/vimeo/1084537-poster-image'
+    )
+  })
+
+  it('should load the vimeo player after click', async () => {
+    const {query, element} = await createVimeoVideo('1084537')
+    assert.ok(!query('iframe'))
+    element.activate()
+    assert.ok(query('iframe'))
+  })
+
+  it('[start-at]', async () => {
+    const {element, query} = await createVimeoVideo('1084537', {'start-at': '97'})
+    element.activate()
+    const iframeSrc = query('iframe').getAttribute('src')
+    assert.equal(iframeSrc, 'https://player.vimeo.com/video/1084537?autoplay=1#t=97')
+  })
+})

test/youtube.js

@@ -3,7 +3,7 @@ import assert from 'assert'
 
 afterEach(() => { document.body.innerHTML = '' })
 
-describe('Youtube Video', () => {
+describe('YouTube Video', () => {
   it('should provide the poster image', async () => {
     const {query} = await createYoutubeVideo('m6UOo2YGbIE')
     assert.equal(
@@ -25,4 +25,11 @@ describe('Youtube Video', () => {
     const iframeSrc = query('iframe').getAttribute('src')
     assert.ok(/^\/\/www\.youtube-nocookie\.com\//.test(iframeSrc))
   })
+
+  it('[start-at]', async () => {
+    const {element, query} = await createYoutubeVideo('XvDZLjaCJuw', {'start-at': '37'})
+    element.activate()
+    const iframeSrc = query('iframe').getAttribute('src')
+    assert.equal(iframeSrc, '//www.youtube-nocookie.com/embed/XvDZLjaCJuw?autoplay=1&start=37')
+  })
 })