1// Copyright (C) 2019 The Android Open Source Project 2// 3// Licensed under the Apache License, Version 2.0 (the "License"); 4// you may not use this file except in compliance with the License. 5// You may obtain a copy of the License at 6// 7// http://www.apache.org/licenses/LICENSE-2.0 8// 9// Unless required by applicable law or agreed to in writing, software 10// distributed under the License is distributed on an "AS IS" BASIS, 11// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12// See the License for the specific language governing permissions and 13// limitations under the License. 14 15import * as m from 'mithril'; 16 17import {Actions} from '../common/actions'; 18import {randomColor} from '../common/colorizer'; 19 20import {globals} from './globals'; 21 22export class VideoPanel implements m.ClassComponent { 23 view() { 24 const vidSections = []; 25 const offset = globals.state.traceTime.startSec + globals.state.videoOffset; 26 vidSections.push( 27 m('video', { 28 class: 'video-panel', 29 controls: true, 30 width: 320, 31 currentTime: globals.frontendLocalState.vidTimestamp - offset, 32 onpause: (e: Event) => { 33 const elem = e.target as HTMLVideoElement; 34 if (globals.state.flagPauseEnabled && !(elem.ended)) { 35 const timestamp = elem.currentTime + offset; 36 const color = randomColor(); 37 const isMovie = true; 38 globals.dispatch(Actions.addNote({timestamp, color, isMovie})); 39 elem.currentTime = timestamp - offset; 40 globals.frontendLocalState.setVidTimestamp(timestamp); 41 } 42 }, 43 ontimeupdate: (e: Event) => { 44 const elem = e.target as HTMLVideoElement; 45 if (globals.state.scrubbingEnabled) { 46 elem.currentTime = globals.frontendLocalState.vidTimestamp - offset; 47 } 48 }, 49 }, 50 m('source', { src: globals.state.video, type: 'video/mp4' }))); 51 const vidMessages = []; 52 const pSetting = `Pause/Flag Synchronization: `; 53 const pEnabled = `When you pause the video, a video flag ` + 54 `will be drawn at this position. \n Also, adding a video flag by ` + 55 `clicking on the notes panel (below the time axis) will move the video ` + 56 `to this position.`; 57 const pDisabled = `Press 'p' to enable.`; 58 const tSetting = `Timeline Scrubbing: `; 59 const tEnabled = `When you hover over the notes panel, the video will ` + 60 `skip to the hovered timestamp.`; 61 const tDisabled = `Press 't' to enable.`; 62 function makeMsg(setting: boolean, msgType: string, e: string, d: string) { 63 return m('h1', { class: `video-panel-${msgType}` }, setting ? e : d); 64 } 65 vidMessages.push( 66 makeMsg(globals.state.flagPauseEnabled, 'setting', 67 pSetting.concat('Enabled'), pSetting.concat('Disabled')), 68 makeMsg(globals.state.flagPauseEnabled, 'message', pEnabled, pDisabled), 69 makeMsg(globals.state.scrubbingEnabled, 'setting', 70 tSetting.concat('Enabled'), tSetting.concat('Disabled')), 71 makeMsg(globals.state.scrubbingEnabled, 'message', tEnabled, tDisabled)); 72 vidSections.push(vidMessages); 73 return m('.video-panel', vidSections); 74 } 75} 76