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);
@@ -348,7 +348,7 @@ class LogoElement extends PolymerElement {
    * @private
    */
   async logImageRendered_(type, logUrl) {
-    const {imageClickParams, interactionLogUrl, shareId} =
+    const { imageClickParams, interactionLogUrl, shareId } =
       await this.pageHandler_.onDoodleImageRendered(
         type, BrowserProxy.getInstance().now(), logUrl);
     this.imageClickParams_ = imageClickParams;
@@ -399,7 +399,7 @@ class LogoElement extends PolymerElement {
       this.dark === undefined || !iframe) {
       return;
     }
-    iframe.postMessage({cmd: 'changeMode', dark: this.dark});
+    iframe.postMessage({ cmd: 'changeMode', dark: this.dark });
   }
 
   /** @private */
@@ -421,8 +421,7 @@ 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 {
+    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_();
+    });
 
-      video.classList.remove('fade-in');
-      video.classList.add('fade-out');
+    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();
+  }
+
+  /** @private */
+  onPlayClick_() {
+    const playControl = $$(this, '#video_control');
+    if (playControl.classList.contains('fa-play-circle')) {
+      this.startVideoPlayer_();
+    } else {
+      this.stopVideoPlayer_();
     }
   }
 }