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 {globals} from './globals'; 18import {Actions} from '../common/actions'; 19import {randomColor} from './colorizer'; 20 21export class VideoPanel implements m.ClassComponent { 22 view() { 23 const vidSections = []; 24 const offset = globals.state.traceTime.startSec + globals.state.videoOffset; 25 vidSections.push( 26 m('video', { 27 class: 'video-panel', 28 controls: true, 29 width: 320, 30 currentTime: globals.frontendLocalState.vidTimestamp - offset, 31 onpause: (e: Event) => { 32 const elem = e.target as HTMLVideoElement; 33 if (globals.state.flagPauseEnabled && !(elem.ended)) { 34 const timestamp = elem.currentTime + offset; 35 const color = randomColor(); 36 const isMovie = true; 37 globals.dispatch(Actions.addNote({timestamp, color, isMovie})); 38 elem.currentTime = timestamp - offset; 39 globals.frontendLocalState.setVidTimestamp(timestamp); 40 } 41 }, 42 ontimeupdate: (e: Event) => { 43 const elem = e.target as HTMLVideoElement; 44 if (globals.state.scrubbingEnabled) { 45 elem.currentTime = globals.frontendLocalState.vidTimestamp - offset; 46 } 47 }, 48 }, 49 m('source', { src: globals.state.video, type: 'video/mp4' }))); 50 const vidMessages = []; 51 const pSetting = `Pause/Flag Synchronization: `; 52 const pEnabled = `When you pause the video, a video flag ` + 53 `will be drawn at this position. \n Also, adding a video flag by ` + 54 `clicking on the notes panel (below the time axis) will move the video ` + 55 `to this position.`; 56 const pDisabled = `Press 'p' to enable.`; 57 const tSetting = `Timeline Scrubbing: `; 58 const tEnabled = `When you hover over the notes panel, the video will ` + 59 `skip to the hovered timestamp.`; 60 const tDisabled = `Press 't' to enable.`; 61 function makeMsg(setting: boolean, msgType: string, e: string, d: string) { 62 return m('h1', { class: `video-panel-${msgType}` }, setting ? e : d); 63 } 64 vidMessages.push( 65 makeMsg(globals.state.flagPauseEnabled, 'setting', 66 pSetting.concat('Enabled'), pSetting.concat('Disabled')), 67 makeMsg(globals.state.flagPauseEnabled, 'message', pEnabled, pDisabled), 68 makeMsg(globals.state.scrubbingEnabled, 'setting', 69 tSetting.concat('Enabled'), tSetting.concat('Disabled')), 70 makeMsg(globals.state.scrubbingEnabled, 'message', tEnabled, tDisabled)); 71 vidSections.push(vidMessages); 72 return m('.video-panel', vidSections); 73 } 74} 75