update tangled video play

chrome/browser/resources/new_tab_page/logo.html

@@ -140,6 +140,10 @@
     --control-pulse-color: rgba(224, 224, 224, 0.4);
   }
 
+  .hidden {
+    visibility: hidden;
+  }
+
   .pulse {
     display: block;
     width: 32px;
@@ -195,65 +199,18 @@
     }
   }
 
-  .fade-in {
-    opacity: 1;
-    animation: fadeIn ease 1s;
-    -webkit-animation: fadeIn ease 1s;
-  }
-
-  @keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  @-webkit-keyframes fadeIn {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-
-  .fade-out {
-    opacity: 0;
-    animation: fadeOut ease 1s;
-    -webkit-animation: fadeOut ease 1s;
-  }
-
-  @keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
-  }
-
-  @-webkit-keyframes fadeOut {
-    0% {
-      opacity: 1;
-    }
-
-    100% {
-      opacity: 0;
-    }
+  .fade {
+    -webkit-transition: all 1s ease;
+    transition: all 1s ease;
   }
 </style>
 <link rel="stylesheet" href="fontawesome.css">
 <template is="dom-if" if="[[showLogo_]]" restamp>
   <div id="logo_container">
-    <!--i class="pulse far fa-play-circle" id="video_control" on-click="onPlayClick_"></i-->
-    <div id="logo" class="fade-in"></div>
-    <!--video id="video" preload="auto" height="284" class="fade-out">
+    <i class="pulse far fa-play-circle" id="video_control" on-click="onPlayClick_"></i>
+    <div id="logo" class="fade"></div>
+    <video id="video" preload="auto" height="284" class="fade hidden">
       <source src="./icons/tangled_browser.mp4" type="video/mp4">
-    </video-->
+    </video>
   </div>
 </template>
\ No newline at end of file

chrome/browser/resources/new_tab_page/logo.js

@@ -7,14 +7,14 @@ import 'tangled://resources/cr_elements/hidden_style_css.m.js';
 import './iframe.js';
 import './doodle_share_dialog.js';
 
-import {assert} from 'tangled://resources/js/assert.m.js';
-import {skColorToRgba} from 'tangled://resources/js/color_utils.js';
-import {EventTracker} from 'tangled://resources/js/event_tracker.m.js';
-import {loadTimeData} from 'tangled://resources/js/load_time_data.m.js';
-import {html, PolymerElement} from 'tangled://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
+import { assert } from 'tangled://resources/js/assert.m.js';
+import { skColorToRgba } from 'tangled://resources/js/color_utils.js';
+import { EventTracker } from 'tangled://resources/js/event_tracker.m.js';
+import { loadTimeData } from 'tangled://resources/js/load_time_data.m.js';
+import { html, PolymerElement } from 'tangled://resources/polymer/v3_0/polymer/polymer_bundled.min.js';
 
-import {BrowserProxy} from './browser_proxy.js';
-import {$$} from './utils.js';
+import { BrowserProxy } from './browser_proxy.js';
+import { $$ } from './utils.js';
 
 /** @type {number} */
 const SHARE_BUTTON_SIZE_PX = 26;
@@ -162,7 +162,7 @@ class LogoElement extends PolymerElement {
     this.eventTracker_ = new EventTracker();
     /** @private {newTabPage.mojom.PageHandlerRemote} */
     this.pageHandler_ = BrowserProxy.getInstance().handler;
-    this.pageHandler_.getDoodle().then(({doodle}) => {
+    this.pageHandler_.getDoodle().then(({ doodle }) => {
       this.doodle_ = doodle;
       this.loaded_ = true;
       if (this.doodle_ && this.doodle_.interactive) {
@@ -181,7 +181,7 @@ class LogoElement extends PolymerElement {
   /** @override */
   connectedCallback() {
     super.connectedCallback();
-    this.eventTracker_.add(window, 'message', ({data}) => {
+    this.eventTracker_.add(window, 'message', ({ data }) => {
       if (data['cmd'] === 'resizeDoodle') {
         this.duration_ = assert(data.duration);
         this.height_ = assert(data.height);
@@ -215,11 +215,11 @@ class LogoElement extends PolymerElement {
       const width = this.imageDoodle_.width;
       this.updateStyles({
         '--ntp-logo-share-button-background-color':
-            skColorToRgba(shareButton.backgroundColor),
+          skColorToRgba(shareButton.backgroundColor),
         '--ntp-logo-share-button-height':
-            `${SHARE_BUTTON_SIZE_PX / height * 100}%`,
+          `${SHARE_BUTTON_SIZE_PX / height * 100}%`,
         '--ntp-logo-share-button-width':
-            `${SHARE_BUTTON_SIZE_PX / width * 100}%`,
+          `${SHARE_BUTTON_SIZE_PX / width * 100}%`,
         '--ntp-logo-share-button-x': `${shareButton.x / width * 100}%`,
         '--ntp-logo-share-button-y': `${shareButton.y / height * 100}%`,
       });
@@ -235,7 +235,7 @@ class LogoElement extends PolymerElement {
     if (this.imageDoodle_) {
       this.updateStyles({
         '--ntp-logo-box-color':
-            skColorToRgba(this.imageDoodle_.backgroundColor),
+          skColorToRgba(this.imageDoodle_.backgroundColor),
       });
     } else {
       this.updateStyles({
@@ -256,8 +256,8 @@ class LogoElement extends PolymerElement {
    */
   computeImageDoodle_() {
     return this.doodle_ && this.doodle_.image &&
-        (this.dark ? this.doodle_.image.dark : this.doodle_.image.light) ||
-        null;
+      (this.dark ? this.doodle_.image.dark : this.doodle_.image.light) ||
+      null;
   }
 
   /**
@@ -266,9 +266,9 @@ class LogoElement extends PolymerElement {
    */
   computeCanShowDoodle_() {
     return !!this.imageDoodle_ ||
-        /* We hide interactive doodles when offline. Otherwise, the iframe
-           would show an ugly error page. */
-        !!this.doodle_ && !!this.doodle_.interactive && window.navigator.onLine;
+      /* We hide interactive doodles when offline. Otherwise, the iframe
+         would show an ugly error page. */
+      !!this.doodle_ && !!this.doodle_.interactive && window.navigator.onLine;
   }
 
   /**
@@ -293,8 +293,8 @@ class LogoElement extends PolymerElement {
    */
   computeDoodleBoxed_() {
     return !this.backgroundColor ||
-        !!this.imageDoodle_ &&
-        this.imageDoodle_.backgroundColor.value !== this.backgroundColor.value;
+      !!this.imageDoodle_ &&
+      this.imageDoodle_.backgroundColor.value !== this.backgroundColor.value;
   }
 
   /**
@@ -307,7 +307,7 @@ class LogoElement extends PolymerElement {
     if (this.isCtaImageShown_()) {
       this.showAnimation_ = true;
       this.pageHandler_.onDoodleImageClicked(
-          newTabPage.mojom.DoodleImageType.kCta, this.interactionLogUrl_);
+        newTabPage.mojom.DoodleImageType.kCta, this.interactionLogUrl_);
 
       // TODO(tiborg): This is technically not correct since we don't know if
       // the animation has loaded yet. However, since the animation is loaded
@@ -315,16 +315,16 @@ class LogoElement extends PolymerElement {
       // practice this should be good enough but we could improve that in the
       // future.
       this.logImageRendered_(
-          newTabPage.mojom.DoodleImageType.kAnimation,
-          /** @type {!url.mojom.Url} */
-          (this.imageDoodle_.animationImpressionLogUrl));
+        newTabPage.mojom.DoodleImageType.kAnimation,
+        /** @type {!url.mojom.Url} */
+        (this.imageDoodle_.animationImpressionLogUrl));
 
       return;
     }
     this.pageHandler_.onDoodleImageClicked(
-        this.showAnimation_ ? newTabPage.mojom.DoodleImageType.kAnimation :
-                              newTabPage.mojom.DoodleImageType.kStatic,
-        null);
+      this.showAnimation_ ? newTabPage.mojom.DoodleImageType.kAnimation :
+        newTabPage.mojom.DoodleImageType.kStatic,
+      null);
     const onClickUrl = new URL(this.doodle_.image.onClickUrl.url);
     if (this.imageClickParams_) {
       for (const param of new URLSearchParams(this.imageClickParams_)) {
@@ -337,9 +337,9 @@ class LogoElement extends PolymerElement {
   /** @private */
   onImageLoad_() {
     this.logImageRendered_(
-        this.isCtaImageShown_() ? newTabPage.mojom.DoodleImageType.kCta :
-                                  newTabPage.mojom.DoodleImageType.kStatic,
-        this.imageDoodle_.imageImpressionLogUrl);
+      this.isCtaImageShown_() ? newTabPage.mojom.DoodleImageType.kCta :
+        newTabPage.mojom.DoodleImageType.kStatic,
+      this.imageDoodle_.imageImpressionLogUrl);
   }
 
   /**
@@ -348,9 +348,9 @@ class LogoElement extends PolymerElement {
    * @private
    */
   async logImageRendered_(type, logUrl) {
-    const {imageClickParams, interactionLogUrl, shareId} =
-        await this.pageHandler_.onDoodleImageRendered(
-            type, BrowserProxy.getInstance().now(), logUrl);
+    const { imageClickParams, interactionLogUrl, shareId } =
+      await this.pageHandler_.onDoodleImageRendered(
+        type, BrowserProxy.getInstance().now(), logUrl);
     this.imageClickParams_ = imageClickParams;
     this.interactionLogUrl_ = interactionLogUrl;
     this.shareId_ = shareId;
@@ -372,7 +372,7 @@ class LogoElement extends PolymerElement {
    */
   onShare_(e) {
     const doodleId =
-        new URL(this.doodle_.image.onClickUrl.url).searchParams.get('ct');
+      new URL(this.doodle_.image.onClickUrl.url).searchParams.get('ct');
     if (!doodleId) {
       return;
     }
@@ -396,10 +396,10 @@ class LogoElement extends PolymerElement {
   sendMode_() {
     const iframe = $$(this, '#iframe');
     if (!loadTimeData.getBoolean('themeModeDoodlesEnabled') ||
-        this.dark === undefined || !iframe) {
+      this.dark === undefined || !iframe) {
       return;
     }
-    iframe.postMessage({cmd: 'changeMode', dark: this.dark});
+    iframe.postMessage({ cmd: 'changeMode', dark: this.dark });
   }
 
   /** @private */
@@ -421,9 +421,8 @@ class LogoElement extends PolymerElement {
    */
   computeAnimationUrl_() {
     return this.imageDoodle_ && this.imageDoodle_.animationUrl ?
-        `chrome-untrusted://new-tab-page/image?${
-            this.imageDoodle_.animationUrl.url}` :
-        '';
+      `chrome-untrusted://new-tab-page/image?${this.imageDoodle_.animationUrl.url}` :
+      '';
   }
 
   /**
@@ -466,29 +465,54 @@ class LogoElement extends PolymerElement {
   }
 
   /** @private */
-  onPlayClick_(){
+  stopVideoPlayer_() {
     const playControl = $$(this, '#video_control');
     const video = $$(this, '#video');
     const logo = $$(this, '#logo');
-    if(playControl.classList.contains('fa-play-circle')) {
-      playControl.classList.remove('fa-play-circle');
-      playControl.classList.add('fa-pause-circle');
 
-      logo.classList.remove('fade-in');
-      logo.classList.add('fade-out');
+    video.removeEventListener('ended', this.videoEndedEventListener_);
 
-      video.classList.remove('fade-out');
-      video.classList.add('fade-in');
+    logo.style.opacity = 1;
+    video.classList.remove('fade');
+    video.style.opacity = 0;
+    setTimeout(() => video.classList.add('fade'), 250);
 
-    } else {
-      playControl.classList.remove('fa-pause-circle');
-      playControl.classList.add('fa-play-circle');
+    video.pause();
+    video.currentTime = 0;
+    video.load();
+    playControl.classList.remove('fa-pause-circle');
+    playControl.classList.add('fa-play-circle');
+  }
+
+  /** @private */
+  startVideoPlayer_() {
+    const playControl = $$(this, '#video_control');
+    const video = $$(this, '#video');
+    const logo = $$(this, '#logo');
 
-      logo.classList.remove('fade-out');
-      logo.classList.add('fade-in');
+    this.videoEndedEventListener_ = video.addEventListener('ended', () => {
+      this.stopVideoPlayer_();
+    });
+
+    playControl.classList.remove('fa-play-circle');
+    playControl.classList.add('fa-pause-circle');
+
+    video.classList.remove('hidden');
+    
+    logo.classList.remove('fade');
+    logo.style.opacity = 0;
+    setTimeout(() => logo.classList.add('fade'), 250);
+    video.style.opacity = 1;
+    video.play();
+  }
 
-      video.classList.remove('fade-in');
-      video.classList.add('fade-out');
+  /** @private */
+  onPlayClick_() {
+    const playControl = $$(this, '#video_control');
+    if (playControl.classList.contains('fa-play-circle')) {
+      this.startVideoPlayer_();
+    } else {
+      this.stopVideoPlayer_();
     }
   }
 }