Skip to content

GitLab

T
tangled
Commit fb07e7f9 authored by Luciano Pacheco's avatar Luciano Pacheco Committed by Commit Bot
Browse files
Options

Video Player: Remove non-native controls 

Remove JS code, CSS style and images used by non-native controls.

Native controls have been enabled by default for a few milestones (since
M73) crbug.com/909963#c7

This CL dead code since the feature flag has been removed: CL:2018089.

Tested manually opening one video as well multiple videos and switching
between them.

Bug: 909963
Change-Id: I3478fb03cb33acff2d58e527af48a31879c37c7c
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/2362171Reviewed-by: default avatarTrent Apted <tapted@chromium.org>
Commit-Queue: Luciano Pacheco <lucmult@chromium.org>
Auto-Submit: Luciano Pacheco <lucmult@chromium.org>
Cr-Commit-Position: refs/heads/master@{#801695}
parent 40ec7eb1
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 4 additions and 3846 deletions
ui/file_manager/BUILD.gn
View file @ fb07e7f9
...@@ -51,7 +51,6 @@ group("closure_compile") { ...@@ -51,7 +51,6 @@ group("closure_compile") {
"integration_tests:closure_compile", "integration_tests:closure_compile",
"integration_tests/file_manager:closure_compile", "integration_tests/file_manager:closure_compile",
"video_player/js:closure_compile", "video_player/js:closure_compile",
"video_player/js/cast:closure_compile",
] ]
} }
......
ui/file_manager/video_player/css/arrow_box.css
View file @ fb07e7f9
...@@ -17,8 +17,8 @@ ...@@ -17,8 +17,8 @@
flex-grow: 1; flex-grow: 1;
} }
#video-player[tools]:not([first-video]) .arrow.left, #video-player:not([first-video]) .arrow.left,
#video-player[tools]:not([last-video]) .arrow.right { #video-player:not([last-video]) .arrow.right {
pointer-events: auto; pointer-events: auto;
} }
......
ui/file_manager/video_player/css/cast_menu.css deleted 100644 → 0
View file @ 40ec7eb1
/* Copyright 2014 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
.cast-menu {
background-color: white;
border-radius: 2px;
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14),
0 1px 5px 0 rgba(0, 0, 0, 0.12),
0 3px 1px -2px rgba(0, 0, 0, 0.2);
margin-bottom: 3px;
min-width: 120px;
outline: none;
overflow: hidden;
padding: 0 0 7px;
position: absolute;
z-index: 1000;
}
.cast-menu:before {
-webkit-padding-start: 12px;
border-bottom: solid 1px rgb(217, 217, 217);
color: rgb(77, 77, 77);
content: attr(playon-text);
display: block;
font-size: 13px;
font-weight: 500;
margin-bottom: 7px;
padding-bottom: 9px;
padding-top: 9px;
}
/* Make the width of the horizontal border one device pixel even on HiDPI.
* crbug.com/417113. */
@media (-webkit-min-device-pixel-ratio: 2) {
.cast-menu:before {
border-bottom: none;
background-image: linear-gradient(rgba(217, 217, 217, 1),
rgba(217, 217, 217, 1),
rgba(217, 217, 217, 0),
rgba(217, 217, 217, 0));
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
}
.cast-menu.hidden {
display: none;
}
.cast-menu > :not(hr) {
-webkit-padding-end: 10px;
-webkit-padding-start: 36px;
color: rgb(51, 51, 51);
font-size: 13px;
height: 32px;
line-height: 32px;
text-overflow: ellipsis;
}
.cast-menu > :not(hr):hover {
background-color: rgb(235, 235, 235);
}
.cast-menu > [checked]:not(hr) {
background-image: -webkit-image-set(
url(../images/media/media_check.png) 1x,
url(../images/media/2x/media_check.png) 2x);
background-position: left 10px center;
background-repeat: no-repeat;
}
html[dir='rtl'] .cast-menu > [checked]:not(hr) {
background-position: right 10px center;
}
.cast-menu > [checked]:before {
display: none;
}
ui/file_manager/video_player/css/media_controls.css deleted 100644 → 0
View file @ 40ec7eb1
/* Copyright (c) 2012 The Chromium Authors. All rights reserved.
* Use of this source code is governed by a BSD-style license that can be
* found in the LICENSE file. */
/* Common styles for media buttons. */
.media-button {
background-position: center;
background-repeat: no-repeat;
flex: none;
height: 32px;
position: relative;
width: 32px;
}
.media-button.disabled {
background-color: transparent;
opacity: 0.26;
}
.media-button.disabled,
cr-slider.readonly {
pointer-events: none;
}
/* Media controls in order of appearance. */
/* Play/pause button. */
.media-button.play {
background-image: -webkit-image-set(
url(../images/media/media_play.png) 1x,
url(../images/media/2x/media_play.png) 2x);
}
.media-button.play[state='playing'] {
background-image: -webkit-image-set(
url(../images/media/media_pause.png) 1x,
url(../images/media/2x/media_pause.png) 2x);
}
/* Time controls: a slider and a text time display. */
.time-controls {
display: flex;
flex: auto;
height: 100%;
}
/* Time display. */
.time-controls > .time {
cursor: default;
display: flex;
flex: none;
height: 100%;
margin: 0 8px;
position: relative;
}
.time-controls > .time.disabled {
opacity: 0;
}
/* Invisible div used to compute the width required for the elapsed time. */
.time-controls > .time > .spacer {
color: transparent;
}
.time-controls > .time > .current {
-webkit-box-align: center;
-webkit-box-orient: horizontal;
-webkit-box-pack: end;
color: rgb(51, 51, 51);
display: -webkit-box;
height: 100%;
position: absolute;
right: 0;
}
/* Progress slider. */
.time-controls > .progress {
flex: auto;
height: 100%;
position: relative;
}
/* Volume controls: sound button and volume slider */
.volume-controls {
display: flex;
flex: none;
height: 100%;
margin: 0 8px;
}
/* Sound button */
.media-button.sound {
background-image: -webkit-image-set(
url(../images/media/media_volume.png) 1x,
url(../images/media/2x/media_volume.png) 2x);
}
.media-button.sound[level='0'] {
background-image: -webkit-image-set(
url(../images/media/media_volume_mute.png) 1x,
url(../images/media/2x/media_volume_mute.png) 2x);
}
/* Volume slider. */
cr-slider.volume {
height: 100%;
position: relative;
width: 110px;
}
/* Horizontal video control bar, all controls in a row. */
.video-controls {
background: rgb(250, 250, 250);
display: flex;
font-size: 13px;
height: 32px;
padding: 8px;
pointer-events: auto;
}
/* Cast button. */
.media-button.cast,
.media-button.cast-button {
background-image: -webkit-image-set(
url(../images/media/media_chromecast.png) 1x,
url(../images/media/2x/media_chromecast.png) 2x);
border-radius: 2px;
display: none;
}
/* Reset browser's button style. */
.media-button.cast {
background-color: transparent;
border: none;
cursor: pointer;
outline: none;
}
#video-player[cast-available][castable] .media-button.cast,
#video-player[mr-cast-available][castable] .media-button.cast-button {
display: block;
}
#video-player[casting] .media-button.cast,
#video-player[casting] .media-button.cast-button {
background-image: -webkit-image-set(
url(../images/media/media_chromecast_casting.png) 1x,
url(../images/media/2x/media_chromecast_casting.png) 2x);
}
.media-button.cast:focus:not(.using-mouse) {
box-shadow: 0 0 0 1px rgba(66, 133, 244, 0.5);
}
/* Fullscreen button. */
/* There is no final decision whether we need a separate icon when toggled. */
.media-button.fullscreen {
background-image: -webkit-image-set(
url(../images/media/media_fullscreen.png) 1x,
url(../images/media/2x/media_fullscreen.png) 2x);
}
#controls[fullscreen] .media-button.fullscreen {
background-image: -webkit-image-set(
url(../images/media/media_fullscreen_exit.png) 1x,
url(../images/media/2x/media_fullscreen_exit.png) 2x);
}
.media-button.subtitles {
background-image: -webkit-image-set(
url(../images/media/media_subtitles.png) 1x,
url(../images/media/2x/media_subtitles.png) 2x);
}
.media-button.subtitles:not([showing]) {
opacity: 0.2;
}
.media-button.subtitles[unavailable] {
display: none;
}
.playback-state-icon {
animation: none;
background-position: center center;
background-repeat: no-repeat;
display: none;
height: 32px;
left: 50%;
margin-left: -16px;
margin-top: -16px;
opacity: 0;
pointer-events: none;
position: absolute;
top: 50%;
width: 32px;
z-index: 2;
}
.text-banner {
background-color: black;
border-radius: 10px;
color: white;
display: none;
font-size: 18px;
left: 50%;
margin-left: -250px;
opacity: 0;
padding: 10px;
pointer-events: none;
position: absolute;
text-align: center;
text-shadow: 0 0 10px black;
top: 20%;
width: 500px;
z-index: 2;
}
.text-banner[visible] {
animation: text-banner-blowup 3000ms;
display: block;
}
.playback-state-icon[state] {
display: block;
}
@keyframes blowup {
from {
opacity: 1;
}
to {
opacity: 0;
transform: scale(3);
}
}
@keyframes text-banner-blowup {
from {
opacity: 0;
transform: scale(0.5);
}
20% {
opacity: 0.75;
transform: scale(1);
}
80% {
opacity: 0.75;
transform: scale(1);
}
to {
opacity: 0;
transform: scale(3);
}
}
.playback-state-icon[state='play'] {
animation: blowup 500ms;
background-image: -webkit-image-set(
url(../images/media/media_play_onscreen.png) 1x,
url(../images/media/2x/media_play_onscreen.png) 2x);
}
.playback-state-icon[state='pause'] {
animation: blowup 500ms;
background-image: -webkit-image-set(
url(../images/media/media_pause_onscreen.png) 1x,
url(../images/media/2x/media_pause_onscreen.png) 2x);
}
ui/file_manager/video_player/css/video_player.css
View file @ fb07e7f9
...@@ -18,15 +18,6 @@ body { ...@@ -18,15 +18,6 @@ body {
width: 100%; width: 100%;
} }
#thumbnail {
background-position: center;
background-repeat: no-repeat;
background-size: contain;
height: 100%;
position: absolute;
width: 100%;
}
#video-container { #video-container {
height: 100%; height: 100%;
left: 0; left: 0;
...@@ -39,31 +30,6 @@ body { ...@@ -39,31 +30,6 @@ body {
display: none; display: none;
} }
#spinner-container {
display: none;
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#video-player[loading] #spinner-container {
display: block;
}
#spinner-container > .spinner {
background: url(chrome://resources/images/throbber_medium.svg) center/100%
no-repeat;
height: 32px;
left: 50%;
margin-left: -16px;
margin-top: -16px;
position: absolute;
top: 50%;
width: 32px;
}
video { video {
height: 100%; height: 100%;
left: 0; left: 0;
...@@ -80,102 +46,6 @@ video { ...@@ -80,102 +46,6 @@ video {
width: 100%; width: 100%;
} }
#video-player:not([casting]) > #cast-container {
display: none;
}
#cast-container {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
#cast-container > #cast-info {
background-image: -webkit-image-set(
url(../images/100/cast_big.png) 1x,
url(../images/200/cast_big.png) 2x);
background-position: 0 0;
background-repeat: no-repeat;
bottom: 70px;
height: 38px;
left: 40px;
opacity: 0.8;
padding: 5px 56px;
position: absolute;
z-index: 10;
}
#cast-container > #cast-info > .first-line {
color: #fff;
font-size: 12px;
font-weight: bold;
line-height: 14px;
text-transform: uppercase;
}
#cast-container > #cast-info > .second-line {
color: #fff;
font-size: 22px;
font-weight: bold;
line-height: 24px;
}
#controls-wrapper {
bottom: 0;
display: flex;
left: 0;
position: absolute;
right: 0;
}
#controls {
flex: auto;
}
#video-player:not([tools]):not([casting]) .tool {
opacity: 0;
}
#video-player:not([tools]):not([casting]) {
cursor: none;
}
.tool { .tool {
transition: opacity 180ms linear; transition: opacity 180ms linear;
} }
#error-wrapper {
-webkit-box-align: center;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
display: -webkit-box;
height: 100%;
left: 0;
pointer-events: none;
position: absolute;
top: 0;
width: 100%;
}
#error {
-webkit-box-align: center;
-webkit-box-orient: horizontal;
-webkit-box-pack: center;
background-color: rgba(24, 24, 24, 1);
background-image: -webkit-image-set(
url(../images/100/error.png) 1x,
url(../images/200/error.png) 2x);
background-position: 25px center;
background-repeat: no-repeat;
color: white;
display: -webkit-box;
height: 54px;
padding-left: 70px;
padding-right: 35px;
}
#error:not([visible]) {
display: none;
}
ui/file_manager/video_player/js/BUILD.gn
View file @ fb07e7f9
...@@ -11,8 +11,6 @@ js_type_check("closure_compile_module") { ...@@ -11,8 +11,6 @@ js_type_check("closure_compile_module") {
":background", ":background",
":closure_compile_externs", ":closure_compile_externs",
":error_util", ":error_util",
":media_controls",
":mouse_inactivity_watcher",
":video_player", ":video_player",
":video_player_metrics", ":video_player_metrics",
":video_player_native_controls", ":video_player_native_controls",
...@@ -25,7 +23,6 @@ js_library("closure_compile_externs") { ...@@ -25,7 +23,6 @@ js_library("closure_compile_externs") {
"$externs_path/chrome_extensions.js", "$externs_path/chrome_extensions.js",
"$externs_path/media_player_private.js", "$externs_path/media_player_private.js",
"$externs_path/metrics_private.js", "$externs_path/metrics_private.js",
"$externs_path/mediasession.js",
"$externs_path/picture_in_picture.js", "$externs_path/picture_in_picture.js",
"//ui/file_manager/externs/chrome_cast.js", "//ui/file_manager/externs/chrome_cast.js",
"//ui/file_manager/externs/platform.js", "//ui/file_manager/externs/platform.js",
...@@ -43,17 +40,6 @@ js_library("background") { ...@@ -43,17 +40,6 @@ js_library("background") {
js_library("error_util") { js_library("error_util") {
} }
js_library("media_controls") {
deps = [
"//ui/file_manager/file_manager/common/js:util",
"//ui/webui/resources/cr_elements/cr_slider:cr_slider",
"//ui/webui/resources/js/cr/ui:menu_button",
]
}
js_library("mouse_inactivity_watcher") {
}
js_library("video_player_native_controls") { js_library("video_player_native_controls") {
deps = [ deps = [
"//ui/file_manager/base/js:app_util", "//ui/file_manager/base/js:app_util",
...@@ -76,14 +62,9 @@ js_unittest("video_player_native_controls_unittest") { ...@@ -76,14 +62,9 @@ js_unittest("video_player_native_controls_unittest") {
js_library("video_player") { js_library("video_player") {
deps = [ deps = [
":error_util", ":error_util",
":media_controls",
":mouse_inactivity_watcher",
":video_player_metrics", ":video_player_metrics",
":video_player_native_controls", ":video_player_native_controls",
"cast:cast_video_element",
"cast:media_manager",
"//ui/file_manager/base/js:filtered_volume_manager", "//ui/file_manager/base/js:filtered_volume_manager",
"//ui/file_manager/base/js:mediasession_types",
"//ui/file_manager/file_manager/common/js:metrics_base", "//ui/file_manager/file_manager/common/js:metrics_base",
"//ui/file_manager/file_manager/common/js:util", "//ui/file_manager/file_manager/common/js:util",
"//ui/file_manager/image_loader:image_loader_client", "//ui/file_manager/image_loader:image_loader_client",
......
ui/file_manager/video_player/js/cast/BUILD.gn deleted 100644 → 0
View file @ 40ec7eb1
# Copyright 2018 The Chromium Authors. All rights reserved.
# Use of this source code is governed by a BSD-style license that can be
# found in the LICENSE file.
import("//third_party/closure_compiler/compile_js.gni")
js_type_check("closure_compile") {
deps = [
":cast_extension_discoverer",
":cast_video_element",
":caster",
":closure_compile_externs",
":media_manager",
]
}
js_library("closure_compile_externs") {
sources = []
externs_list = [
"$externs_path/chrome_extensions.js",
"$externs_path/media_player_private.js",
"$externs_path/mediasession.js",
"//ui/file_manager/externs/background/volume_manager_factory.js",
"//ui/file_manager/externs/chrome_cast.js",
"//ui/file_manager/externs/platform.js",
]
}
js_library("cast_extension_discoverer") {
deps = [ "//ui/file_manager/video_player/js:error_util" ]
}
js_library("cast_video_element") {
deps = [
":media_manager",
"//ui/file_manager/video_player/js:error_util",
"//ui/file_manager/video_player/js:video_player_metrics",
"//ui/webui/resources/js/cr:event_target",
]
}
js_library("caster") {
deps = [
":cast_extension_discoverer",
"//ui/file_manager/video_player/js:video_player",
]
}
js_library("media_manager") {
}
ui/file_manager/video_player/js/cast/cast_extension_discoverer.js deleted 100644 → 0
View file @ 40ec7eb1
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// TODO(crbug.com/689773): Update to use <script>
/**
* Discover the ID of installed cast extension.
* @constructor
* @struct
*/
function CastExtensionDiscoverer() {}
/**
* Tentative IDs to try.
* @type {!Array<string>}
* @const
*/
CastExtensionDiscoverer.CAST_EXTENSION_IDS = [
'enhhojjnijigcajfphajepfemndkmdlo', // Media Router Dev
'pkedcjkdefgpdelpbcmbmeomcjbeemfm' // Media Router Stable
];
/**
* @param {function(?string)} callback Callback called with the extension ID.
* The ID may be null if extension is not found.
*/
CastExtensionDiscoverer.findInstalledExtension = function(callback) {
CastExtensionDiscoverer.findInstalledExtensionHelper_(0, callback);
};
/**
* @param {number} index Current index which is tried to check.
* @param {function(?string)} callback Callback function which will be called
* the extension is found.
* @private
*/
CastExtensionDiscoverer.findInstalledExtensionHelper_ = function(index,
callback) {
if (index === CastExtensionDiscoverer.CAST_EXTENSION_IDS.length) {
// no extension found.
callback(null);
return;
}
CastExtensionDiscoverer.isExtensionInstalled_(
CastExtensionDiscoverer.CAST_EXTENSION_IDS[index],
function(installed) {
if (installed) {
callback(CastExtensionDiscoverer.CAST_EXTENSION_IDS[index]);
} else {
CastExtensionDiscoverer.findInstalledExtensionHelper_(index + 1,
callback);
}
});
};
/**
* The result will be notified on |callback|. True if installed, false not.
* @param {string} extensionId Id to be checked.
* @param {function(boolean)} callback Callback to notify the result.
* @private
*/
CastExtensionDiscoverer.isExtensionInstalled_ =
function(extensionId, callback) {
var xhr = new XMLHttpRequest();
var url = 'chrome-extension://' + extensionId + '/cast_sender.js';
xhr.open('GET', url, true);
xhr.onerror = function() {
callback(false);
};
/** @param {*} event */
xhr.onreadystatechange = function(event) {
if (xhr.readyState == 4 && xhr.status === 200) {
// Cast extension found.
callback(true);
}
}.wrap(this);
xhr.send();
};
ui/file_manager/video_player/js/cast/caster.js deleted 100644 → 0
View file @ 40ec7eb1
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
// This hack prevents a bug on the cast extension.
// TODO(yoshiki): Remove this once the cast extension supports Chrome apps.
// Although localStorage in Chrome app is not supported, but it's used in the
// cast extension. This line prevents an exception on using localStorage.
Object.defineProperty(window, 'localStorage', {
get: function() {
return {};
}
});
/**
* @type {string}
* @const
*/
var APPLICATION_ID = '4CCB98DA';
if (document.readyState === 'loading') {
document.addEventListener('DOMContentLoaded', initialize);
} else {
initialize();
}
/**
* Starts initialization of cast-related feature.
*/
function initialize() {
if (window.loadMockCastExtensionForTest) {
// If the test flag is set, the mock extension for test will be laoded by
// the test script. Sets the handler to wait for loading.
onLoadCastSDK(initializeApi);
return;
}
CastExtensionDiscoverer.findInstalledExtension(function(foundId) {
if (foundId) {
loadCastSDK(foundId, initializeApi);
} else {
console.info('No Google Cast extension is installed.');
}
}.wrap());
}
/**
* Loads the Google Cast Sender SDK from the given cast extension.
* The given callback is executes after the cast SDK is loaded.
*
* @param {string} extensionId ID of the extension to be loaded.
* @param {function()} callback Callback (executed asynchronously).
*/
function loadCastSDK(extensionId, callback) {
var script = document.createElement('script');
var onError = function() {
script.removeEventListener('error', onError);
document.body.removeChild(script);
console.error('Google Cast extension load failed.');
}.wrap();
// Load the Cast Sender SDK provided by the given Cast extension.
// Legacy Cast extension relies on the extension ID being set by bootstrap
// code, so set the ID here.
window.chrome['cast'] = window.chrome['cast'] || {};
window.chrome['cast']['extensionId'] = extensionId;
script.src = 'chrome-extension://' + extensionId + '/cast_sender.js';
script.addEventListener('error', onError);
script.addEventListener('load', onLoadCastSDK.bind(null, callback));
document.body.appendChild(script);
}
/**
* Handles load event of Cast SDK and make sure the Cast API is available.
* @param {function()} callback Callback which is called when the Caset Sender
* API is ready for use.
*/
function onLoadCastSDK(callback) {
var executeCallback = function() {
setTimeout(callback, 0); // Runs asynchronously.
};
if(!chrome.cast || !chrome.cast.isAvailable) {
var checkTimer = setTimeout(function() {
console.error('Either "Google Cast API" or "Google Cast" extension ' +
'seems not to be installed?');
}.wrap(), 5000);
window['__onGCastApiAvailable'] = function(loaded, errorInfo) {
clearTimeout(checkTimer);
if (loaded) {
executeCallback();
} else {
console.error('Google Cast extension load failed.', errorInfo);
}
}.wrap();
} else {
// Just executes the callback since the API is already loaded.
executeCallback();
}
}
/**
* Initialize Cast API.
*/
function initializeApi() {
var onSession = function() {
// TODO(yoshiki): Implement this.
};
var onInitSuccess = function() {
// TODO(yoshiki): Implement this.
};
/**
* @param {chrome.cast.Error} error
*/
var onError = function(error) {
console.error('Error on Cast initialization.', error);
};
var sessionRequest = new chrome.cast.SessionRequest(APPLICATION_ID);
var apiConfig = new chrome.cast.ApiConfig(sessionRequest,
onSession,
onReceiver);
chrome.cast.initialize(apiConfig, onInitSuccess, onError);
}
/**
* Called when receiver availability is changed. This method is also called when
* initialization is completed.
*
* @param {chrome.cast.ReceiverAvailability} availability Availability of casts.
* @param {Array<Object>} receivers List of casts.
*/
function onReceiver(availability, receivers) {
if (chrome.cast.usingPresentationApi) {
player.setCastAvailability(
availability === chrome.cast.ReceiverAvailability.AVAILABLE);
return;
}
if (availability === chrome.cast.ReceiverAvailability.AVAILABLE) {
if (!receivers) {
console.error('Receiver list is empty.');
receivers = [];
}
metrics.recordNumberOfCastDevices(receivers.length);
player.setCastList(receivers);
} else if (availability == chrome.cast.ReceiverAvailability.UNAVAILABLE) {
metrics.recordNumberOfCastDevices(0);
player.setCastList([]);
} else {
console.error('Unexpected response in onReceiver.', arguments);
player.setCastList([]);
}
}
ui/file_manager/video_player/js/cast/media_manager.js deleted 100644 → 0
View file @ 40ec7eb1
// Copyright 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* Media manager class.
* This class supports the information for the media file.
* @param {!FileEntry} entry Entry of media file. This must be a external entry.
* @constructor
*/
function MediaManager(entry) {
this.entry_ = entry;
this.cachedDriveProp_ = null;
this.cachedUrl_ = null;
this.cachedToken_ = null;
Object.seal(this);
}
MediaManager.prototype = {};
/**
* Checks if the file is available for cast or not.
*
* @return {Promise} Promise which is resolved with boolean. If true, the file
* is available for cast. False, otherwise.
*/
MediaManager.prototype.isAvailableForCast = function() {
return this.getUrl().then(function(url) {
return true;
}, function() {
return false;
});
};
/**
* Retrieves the token for cast.
*
* @param {boolean} refresh If true, force to refresh a token. If false, use the
* cached token if available.
* @return {Promise} Promise which is resolved with the token. Reject if failed.
*/
MediaManager.prototype.getToken = function(refresh) {
if (chrome.test) {
return Promise.resolve('DUMMY_ACCESS_TOKEN');
}
if (this.cachedToken_ && !refresh) {
return Promise.resolve(this.cachedToken_);
}
return new Promise(function(fulfill, reject) {
// TODO(yoshiki): Creates the method to get a token and use it.
chrome.fileManagerPrivate.getDownloadUrl(this.entry_, fulfill);
}.bind(this)).then(function(url) {
if (chrome.runtime.lastError) {
return Promise.reject(
'Token fetch failed: ' + chrome.runtime.lastError.message);
}
if (!url) {
return Promise.reject('Token fetch failed.');
}
var index = url.indexOf('access_token=');
var token = url.substring(index + 13);
if (index > 0 && token) {
this.cachedToken_ = token;
return token;
} else {
return Promise.reject('Token fetch failed.');
}
}.bind(this));
};
/**
* Retrieves the url for cast.
*
* @return {Promise} Promise which is resolved with the url. Reject if failed.
*/
MediaManager.prototype.getUrl = function() {
if (chrome.test) {
return Promise.resolve('http://example.com/dummy_url.mp4');
}
if (this.cachedUrl_) {
return Promise.resolve(this.cachedUrl_);
}
return new Promise(function(fulfill, reject) {
// TODO(yoshiki): Creates the method to get a url and use it.
chrome.fileManagerPrivate.getDownloadUrl(this.entry_, fulfill);
}.bind(this)).then(function(url) {
if (chrome.runtime.lastError) {
return Promise.reject(
'URL fetch failed: ' + chrome.runtime.lastError.message);
}
if (!url) {
return Promise.reject('URL fetch failed.');
}
var accessTokenIndex = url.indexOf('access_token=');
if (accessTokenIndex) {
url = url.substring(0, accessTokenIndex - 1);
}
this.cachedUrl_ = url;
return url;
}.bind(this));
};
/**
* Retrieves the mime of file.
*
* @return {Promise} Promise which is resolved with the mime. Reject if failed.
*/
MediaManager.prototype.getMime = function() {
if (this.cachedDriveProp_) {
return Promise.resolve(this.cachedDriveProp_.contentMimeType || '');
}
return new Promise(function(fulfill, reject) {
chrome.fileManagerPrivate.getEntryProperties(
[this.entry_], ['contentMimeType', 'thumbnailUrl'], fulfill);
}.bind(this)).then(function(props) {
if (!props || !props[0]) {
return Promise.reject('Mime fetch failed.');
} else if (!props[0].contentMimeType) {
// TODO(yoshiki): Adds a logic to guess the mime.
this.cachedDriveProp_ = props[0];
return '';
} else {
this.cachedDriveProp_ = props[0];
return props[0].contentMimeType;
}
}.bind(this));
};
/**
* Retrieves the thumbnail url of file.
*
* @return {Promise} Promise which is resolved with the url. Reject if failed.
*/
MediaManager.prototype.getThumbnail = function() {
if (this.cachedDriveProp_) {
return Promise.resolve(this.cachedDriveProp_.thumbnailUrl || '');
}
return new Promise(function(fulfill, reject) {
chrome.fileManagerPrivate.getEntryProperties(
[this.entry_], ['contentMimeType', 'thumbnailUrl'], fulfill);
}.bind(this)).then(function(props) {
if (!props || !props[0]) {
return Promise.reject('Thumbnail fetch failed.');
} else {
this.cachedDriveProp_ = props[0];
return props[0].thumbnailUrl || '';
}
}.bind(this));
};
ui/file_manager/video_player/js/media_controls.js deleted 100644 → 0
View file @ 40ec7eb1
This diff is collapsed.
ui/file_manager/video_player/js/mouse_inactivity_watcher.js deleted 100644 → 0
View file @ 40ec7eb1
// Copyright (c) 2014 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
/**
* A controller class detects mouse inactivity and hides "tool" elements.
*
* @param {Element} container The main DOM container.
* @param {number=} opt_timeout Hide timeout in ms.
* @param {function():boolean=} opt_toolsActive Function that returns |true|
* if the tools are active and should not be hidden.
* @constructor
*/
function MouseInactivityWatcher(container, opt_timeout, opt_toolsActive) {
this.container_ = container;
this.timeout_ = opt_timeout || MouseInactivityWatcher.DEFAULT_TIMEOUT;
this.toolsActive_ = opt_toolsActive || function() {
return false;
};
this.onTimeoutBound_ = this.onTimeout_.bind(this);
this.timeoutID_ = null;
this.mouseOverTool_ = false;
this.clientX_ = 0;
this.clientY_ = 0;
/**
* Indicates if the inactivity watcher is enabled or disabled. Use getters
* and setters.
* @type {boolean}
* @private
*/
this.disabled_ = false;
this.container_.addEventListener('mousemove', this.onMouseMove_.bind(this));
var tools = this.container_.querySelector('.tool');
for (var i = 0; i < tools.length; i++) {
tools[i].addEventListener('mouseover', this.onToolMouseOver_.bind(this));
tools[i].addEventListener('mouseout', this.onToolMouseOut_.bind(this));
}
// Show tools when the user touches the screen.
this.container_.addEventListener(
'touchstart', this.activityStarted_.bind(this));
var initiateFading = this.activityStopped_.bind(this, this.timeout_);
this.container_.addEventListener('touchend', initiateFading);
this.container_.addEventListener('touchcancel', initiateFading);
this.container_.addEventListener('focusin', function() {
this.activityStarted_();
this.activityStopped_();
}.bind(this));
// If pointer goes outside the app window, tools should be hidden immediately.
document.addEventListener('mouseout', function(event) {
if (event.relatedTarget === null) {
this.forceTimeout_();
}
}.bind(this));
}
/**
* Default inactivity timeout.
*/
MouseInactivityWatcher.DEFAULT_TIMEOUT = 3000;
/**
* Defines getter/setter for disabled property to update inactivity state.
*/
MouseInactivityWatcher.prototype = {
/**
* @return {boolean}
*/
get disabled() {
return this.disabled_;
},
/**
* @param {boolean} value
*/
set disabled(value) {
this.disabled_ = value;
if (value) {
this.kick();
} else {
this.check();
}
}
};
/**
* @param {boolean} on True if show, false if hide.
*/
MouseInactivityWatcher.prototype.showTools = function(on) {
if (on) {
this.container_.setAttribute('tools', 'true');
} else {
this.container_.removeAttribute('tools');
}
};
/**
* To be called when the user started activity. Shows the tools
* and cancels the countdown.
* @private
*/
MouseInactivityWatcher.prototype.activityStarted_ = function() {
this.showTools(true);
if (this.timeoutID_) {
clearTimeout(this.timeoutID_);
this.timeoutID_ = null;
}
};
/**
* Called when user activity has stopped. Re-starts the countdown.
* @param {number=} opt_timeout Timeout.
* @private
*/
MouseInactivityWatcher.prototype.activityStopped_ = function(opt_timeout) {
if (this.disabled_ || this.mouseOverTool_ || this.toolsActive_()) {
return;
}
if (this.timeoutID_) {
clearTimeout(this.timeoutID_);
}
this.timeoutID_ =
setTimeout(this.onTimeoutBound_, opt_timeout || this.timeout_);
};
/**
* Called when a user performed a short action (such as a click or a key press)
* that should show the tools if they are not visible.
* @param {number=} opt_timeout Timeout.
*/
MouseInactivityWatcher.prototype.kick = function(opt_timeout) {
this.activityStarted_();
this.activityStopped_(opt_timeout);
};
/**
* Check if the tools are active and update the tools visibility accordingly.
*/
MouseInactivityWatcher.prototype.check = function() {
if (this.toolsActive_()) {
this.activityStarted_();
} else {
this.activityStopped_();
}
};
/**
* Mouse move handler.
*
* @param {Event} e Event.
* @private
*/
MouseInactivityWatcher.prototype.onMouseMove_ = function(e) {
if (this.clientX_ == e.clientX && this.clientY_ == e.clientY) {
// The mouse has not moved, must be the cursor change triggered by
// some of the attributes on the root container. Ignore the event.
return;
}
this.clientX_ = e.clientX;
this.clientY_ = e.clientY;
if (this.disabled_) {
return;
}
this.kick();
};
/**
* Mouse over handler on a tool element.
*
* @param {Event} e Event.
* @private
*/
MouseInactivityWatcher.prototype.onToolMouseOver_ = function(e) {
this.mouseOverTool_ = true;
if (!this.disabled_) {
this.kick();
}
};
/**
* Mouse out handler on a tool element.
*
* @param {Event} e Event.
* @private
*/
MouseInactivityWatcher.prototype.onToolMouseOut_ = function(e) {
this.mouseOverTool_ = false;
if (!this.disabled_) {
this.kick();
}
};
/**
* Timeout handler.
* @private
*/
MouseInactivityWatcher.prototype.onTimeout_ = function() {
this.timeoutID_ = null;
if (!this.disabled_ && !this.toolsActive_()) {
this.showTools(false);
}
};
/**
* Force the timer to be timed out immediately.
* @private
*/
MouseInactivityWatcher.prototype.forceTimeout_ = function() {
if (this.timeoutID_) {
clearTimeout(this.timeoutID_);
this.onTimeout_();
}
};
ui/file_manager/video_player/js/video_player_native_controls.js
View file @ fb07e7f9
...@@ -44,13 +44,6 @@ class NativeControlsVideoPlayer { ...@@ -44,13 +44,6 @@ class NativeControlsVideoPlayer {
this.videoElement_.style.pointerEvents = 'auto'; this.videoElement_.style.pointerEvents = 'auto';
getRequiredElement('video-container').appendChild(this.videoElement_); getRequiredElement('video-container').appendChild(this.videoElement_);
// TODO: remove the element in html when remove the feature flag
getRequiredElement('controls-wrapper').style.display = 'none';
getRequiredElement('spinner-container').style.display = 'none';
getRequiredElement('error-wrapper').style.display = 'none';
getRequiredElement('thumbnail').style.display = 'none';
getRequiredElement('cast-container').style.display = 'none';
this.videoElement_.addEventListener('pause', this.onPause_.bind(this)); this.videoElement_.addEventListener('pause', this.onPause_.bind(this));
// Restore playback position when duration change. // Restore playback position when duration change.
......
ui/file_manager/video_player/js/video_player_scripts.js
View file @ fb07e7f9
...@@ -27,12 +27,6 @@ ...@@ -27,12 +27,6 @@
// <include src="../../../webui/resources/js/cr/event_target.js"> // <include src="../../../webui/resources/js/cr/event_target.js">
// <include src="../../../webui/resources/js/cr/ui/array_data_model.js"> // <include src="../../../webui/resources/js/cr/ui/array_data_model.js">
// <include src="../../../webui/resources/js/cr/ui/position_util.js">
// <include src="../../../webui/resources/js/cr/ui/menu_item.js">
// <include src="../../../webui/resources/js/cr/ui/menu.js">
// <include src="../../../webui/resources/js/cr/ui/menu_button.js">
// <include src="../../../webui/resources/js/cr/ui/context_menu_handler.js">
(function() { (function() {
'use strict'; 'use strict';
...@@ -46,18 +40,9 @@ ...@@ -46,18 +40,9 @@
/* TODO(tapted): Remove the util.js dependency */ /* TODO(tapted): Remove the util.js dependency */
// <include src="../../file_manager/common/js/util.js"> // <include src="../../file_manager/common/js/util.js">
// <include src="../../base/js/mediasession_types.js">
// <include src="../../base/js/volume_manager_types.js"> // <include src="../../base/js/volume_manager_types.js">
// <include src="../../base/js/filtered_volume_manager.js"> // <include src="../../base/js/filtered_volume_manager.js">
// <include src="cast/cast_extension_discoverer.js">
// <include src="cast/cast_video_element.js">
// <include src="cast/media_manager.js">
// <include src="cast/caster.js">
// <include src="media_controls.js">
// <include src="mouse_inactivity_watcher.js">
// <include src="video_player_native_controls.js"> // <include src="video_player_native_controls.js">
// <include src="video_player.js"> // <include src="video_player.js">
......
ui/file_manager/video_player/video_player.html
View file @ fb07e7f9
...@@ -9,15 +9,10 @@ ...@@ -9,15 +9,10 @@
<title>#xFEFF;</title> <title>#xFEFF;</title>
<script src="chrome://resources/polymer/v1_0/html-imports/html-imports.min.js"></script> <script src="chrome://resources/polymer/v1_0/html-imports/html-imports.min.js"></script>
<link rel="stylesheet" href="chrome://resources/css/text_defaults.css"> <link rel="stylesheet" href="chrome://resources/css/text_defaults.css">
<link rel="stylesheet" type="text/css" href="css/media_controls.css">
<link rel="stylesheet" href="chrome://resources/css/menu.css">
<link rel="stylesheet" type="text/css" href="css/video_player.css"> <link rel="stylesheet" type="text/css" href="css/video_player.css">
<link rel="stylesheet" type="text/css" href="css/arrow_box.css"> <link rel="stylesheet" type="text/css" href="css/arrow_box.css">
<link rel="stylesheet" type="text/css" href="css/cast_menu.css">
<link rel="import" href="chrome-extension://hhaomjibdihmijegdhdafkllkbggdgoj/foreground/elements/files_icon_button.html">
<link rel="import" href="chrome://resources/cr_elements/cr_slider/cr_slider.html">
<link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html"> <link rel="import" href="chrome://resources/cr_elements/cr_toast/cr_toast.html">
<script src="js/video_player_scripts.js"></script> <script src="js/video_player_scripts.js"></script>
...@@ -25,18 +20,6 @@ ...@@ -25,18 +20,6 @@
<body> <body>
<custom-style> <custom-style>
<style> <style>
files-icon-button {
--files-ripple-bg-color: black;
--files-toggle-ripple-bg-color: black;
--files-toggle-ripple-activated-bg-color: black;
}
cr-slider {
cursor: pointer;
--cr-slider-knob-color-rgb: 64, 138, 241;
--cr-slider-active-color: rgb(66, 133, 244);
}
/* Let cr-toast appear at top left corner */ /* Let cr-toast appear at top left corner */
cr-toast { cr-toast {
...@@ -51,36 +34,17 @@ ...@@ -51,36 +34,17 @@
</style> </style>
</custom-style> </custom-style>
<div id="video-player" tools> <div id="video-player">
<cr-toast id="toast" duration="3000"> <cr-toast id="toast" duration="3000">
<div id="toast-content"></div> <div id="toast-content"></div>
</cr-toast> </cr-toast>
<cr-menu id='cast-menu' class='cast-menu tool'
i18n-values="playon-text:VIDEO_PLAYER_PLAY_ON"></cr-menu>
<div id="cast-container">
<div id="cast-info">
<div class="first-line" id='cast-name-label'
i18n-content="VIDEO_PLAYER_PLAYING_ON"></div>
<div class="second-line" id="cast-name"></div>
</div>
</div>
<div id="thumbnail"></div>
<div id="video-container"> <div id="video-container">
</div> </div>
<div id="spinner-container">
<div class="spinner"></div>
</div>
<div id="controls-wrapper">
<div id="controls" class="tool"></div>
</div>
<div class="arrow-box"> <div class="arrow-box">
<div class="arrow left tool"><div></div></div> <div class="arrow left tool"><div></div></div>
<div class="arrow-spacer"></div> <div class="arrow-spacer"></div>
<div class="arrow right tool"><div></div></div> <div class="arrow right tool"><div></div></div>
</div> </div>
<div id="error-wrapper">
<div id="error"></div>
</div>
</div> </div>
</body> </body>
</html> </html>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment