Fix CCA selected resolution not shown bug

Bug: None

Change-Id: Ifbbbe1ad0c5f50ea7454e1256b0ba8f9cdce2e55
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1624365Reviewed-by: Sheng-hao Tsao <shenghao@chromium.org>
Commit-Queue: Kuo Jen Wei <inker@chromium.org>
Cr-Commit-Position: refs/heads/master@{#662985}

chrome/browser/resources/chromeos/camera/BUILD.gn

@@ -165,6 +165,7 @@ copy("chrome_camera_app_js_views_camera") {
     "src/js/views/camera/options.js",
     "src/js/views/camera/preview.js",
     "src/js/views/camera/recordtime.js",
+    "src/js/views/camera/resolution_preference.js",
     "src/js/views/camera/timertick.js",
   ]
 

chrome/browser/resources/chromeos/camera/Makefile

@@ -137,6 +137,7 @@ RESOURCES = \
 	src/js/views/camera/options.js \
 	src/js/views/camera/preview.js \
 	src/js/views/camera/recordtime.js \
+	src/js/views/camera/resolution_preference.js \
 	src/js/views/camera/timertick.js \
 	src/js/views/dialog.js \
 	src/js/views/gallery_base.js \

chrome/browser/resources/chromeos/camera/src/js/views/camera.js

@@ -30,6 +30,20 @@ cca.views.Camera = function(model, resolBroker) {
    */
   this.model_ = model;
 
+  /**
+   * @type {cca.views.camera.PhotoResolPreferrer}
+   * @private
+   */
+  this.photoResolPreferrer_ = new cca.views.camera.PhotoResolPreferrer(
+      resolBroker, this.stop_.bind(this));
+
+  /**
+   * @type {cca.views.camera.VideoResolPreferrer}
+   * @private
+   */
+  this.videoResolPreferrer_ = new cca.views.camera.VideoResolPreferrer(
+      resolBroker, this.stop_.bind(this));
+
   /**
    * Layout handler for the camera view.
    * @type {cca.views.camera.Layout}
@@ -49,8 +63,9 @@ cca.views.Camera = function(model, resolBroker) {
    * @type {cca.views.camera.Options}
    * @private
    */
-  this.options_ =
-      new cca.views.camera.Options(resolBroker, this.stop_.bind(this));
+  this.options_ = new cca.views.camera.Options(
+      this.photoResolPreferrer_, this.videoResolPreferrer_,
+      this.stop_.bind(this));
 
   /**
    * Modes for the camera.
@@ -58,8 +73,8 @@ cca.views.Camera = function(model, resolBroker) {
    * @private
    */
   this.modes_ = new cca.views.camera.Modes(
-      resolBroker, this.stop_.bind(this), this.stop_.bind(this),
-      async (blob, isMotionPicture, filename) => {
+      this.photoResolPreferrer_, this.videoResolPreferrer_,
+      this.stop_.bind(this), async (blob, isMotionPicture, filename) => {
         if (blob) {
           cca.metrics.log(
               cca.metrics.Type.CAPTURE, this.facingMode_, blob.mins);
@@ -225,10 +240,9 @@ cca.views.Camera.prototype.stop_ = function() {
 cca.views.Camera.prototype.startWithDevice_ = async function(deviceId) {
   let supportedModes = null;
   for (const mode of this.modes_.getModeCandidates()) {
-    const [photoRs, videoRs] =
-        await this.options_.getDeviceResolutions(deviceId);
+    const previewRs = (await this.options_.getDeviceResolutions(deviceId))[1];
     for (const [[width, height], previewCandidates] of this.modes_
-             .getResolutionCandidates(mode, deviceId, photoRs, videoRs)) {
+             .getResolutionCandidates(mode, deviceId, previewRs)) {
       for (const constraints of previewCandidates) {
         try {
           const stream = await navigator.mediaDevices.getUserMedia(constraints);

chrome/browser/resources/chromeos/camera/src/js/views/camera/options.js

@@ -21,16 +21,24 @@ cca.views.camera = cca.views.camera || {};
 
 /**
  * Creates a controller for the options of Camera view.
- * @param {cca.ResolutionEventBroker} resolBroker
+ * @param {cca.views.camera.PhotoResolPreferrer} photoResolPreferrer
+ * @param {cca.views.camera.VideoResolPreferrer} videoResolPreferrer
  * @param {function()} doSwitchDevice Callback to trigger device switching.
  * @constructor
  */
-cca.views.camera.Options = function(resolBroker, doSwitchDevice) {
+cca.views.camera.Options = function(
+    photoResolPreferrer, videoResolPreferrer, doSwitchDevice) {
   /**
-   * @type {cca.ResolutionEventBroker}
+   * @type {cca.views.camera.PhotoResolPreferrer}
    * @private
    */
-  this.resolBroker_ = resolBroker;
+  this.photoResolPreferrer_ = photoResolPreferrer;
+
+  /**
+   * @type {cca.views.camera.VideoResolPreferrer}
+   * @private
+   */
+  this.videoResolPreferrer_ = videoResolPreferrer;
 
   /**
    * @type {function()}
@@ -132,13 +140,6 @@ cca.views.camera.Options.FRONT_CAMERA_LABEL = 'Front Camera';
  */
 cca.views.camera.Options.BACK_CAMERA_LABEL = 'Back Camera';
 
-/**
- * Label of external facing camera from MediaDeviceInfo.
- * @type {string}
- * @const
- */
-cca.views.camera.Options.EXTERNAL_CAMERA_LABEL = 'External Camera';
-
 /**
  * Switches to the next available camera device.
  * @private
@@ -300,15 +301,19 @@ cca.views.camera.Options.prototype.maybeRefreshVideoDeviceIds_ = function() {
         case cca.views.camera.Options.BACK_CAMERA_LABEL:
           backSetting = setting;
           break;
-        case cca.views.camera.Options.EXTERNAL_CAMERA_LABEL:
-          externalSettings.push(setting);
-          break;
         default:
-          console.error(`Ignore device of unknown label: ${label}`);
+          // TODO(inker): Use private API to get camera facing information.
+          externalSettings.push(setting);
       }
     });
-    this.resolBroker_.notifyUpdateDeviceResolutions(
-        frontSetting, backSetting, externalSettings);
+    this.photoResolPreferrer_.updateResolutions(
+        frontSetting && [frontSetting[0], frontSetting[1]],
+        backSetting && [backSetting[0], backSetting[1]],
+        externalSettings.map(([deviceId, photoRs]) => [deviceId, photoRs]));
+    this.videoResolPreferrer_.updateResolutions(
+        frontSetting && [frontSetting[0], frontSetting[2]],
+        backSetting && [backSetting[0], backSetting[2]],
+        externalSettings.map(([deviceId, , videoRs]) => [deviceId, videoRs]));
   });
 };
 

chrome/browser/resources/chromeos/camera/src/views/main.html

@@ -35,6 +35,7 @@
     <script src="../js/views/camera/options.js"></script>
     <script src="../js/views/camera/preview.js"></script>
     <script src="../js/views/camera/recordtime.js"></script>
+    <script src="../js/views/camera/resolution_preference.js"></script>
     <script src="../js/views/camera/timertick.js"></script>
     <script src="../js/views/camera/modes.js"></script>
     <script src="../js/views/dialog.js"></script>