[Files.app] Initial implementation of new audio player

chrome/browser/resources/file_manager/audio_player/elements/control_panel.css

+/* Cpyright 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. */
+
+/* Controls bar. */
+.controls {
+  align-items: center;

[mtomasz, 2014/01/27 01:09:24]

Thx for the flex!

+  background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  height: 64px;
+  justify-content: center;
+  padding: 0;
+}
+
+.controls .upper-controls {
+  height: 32px;
+  width: 100%
+}
+
+.controls .lower-controls {
+  height: 32px;
+  width: 100%
+}
+
+.audio-controls {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  justify-content: center;
+  padding: 0;
+}
+
+/* Customized scrollbar for the playlist. */
+
+.media-button {
+  height: 32px;
+  position: relative;
+  width: 32px;
+}
+
+.media-button > div {
+  height: 100%;
+  opacity: 0;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity 100ms linear;
+  width: 100%;
+}
+
+.media-button.toggle > label > div {
+  height: 100%;
+  pointer-events: none;
+  position: absolute;
+  transition: opacity 100ms linear;
+  width: 100%;
+}
+
+.media-button[state='default']:not(.disabled) > .default,
+.media-button[state='ended']:not(.disabled) > .ended,
+.media-button[state='playing']:not(.disabled) > .playing,
+.media-button.disabled > .disabled {
+  opacity: 1;
+}
+
+/* Custom sliders for progress and volume. */
+
+/* Customize the standard input[type='range']. */
+
+/* Time controls: a slider and a text time display. */
+
+.time-controls {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  justify-content: center;
+}
+
+.custom-slider.progress {
+  display: flex;
+  flex: 1 1 auto;
+  height: 100%;
+  position: relative;
+  z-index: 0;  /* Make a layer which includes the thumb on slider. */
+}
+
+.custom-slider.progress > input[type='range']::-webkit-slider-thumb {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_timeline_handler.png') 1x,
+      url('../assets/100/player_timeline_handler.png') 2x);
+  width: 28px;
+}
+
+.custom-slider.progress > input[type='range']::-webkit-slider-thumb:hover {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_timeline_handler.png') 1x,
+      url('../assets/100/player_timeline_handler.png') 2x);

[mtomasz, 2014/01/27 01:09:24]

100 -> 200. Please check other places.

[yoshiki, 2014/01/27 07:12:08]

Thanks, Done.

+}
+
+.custom-slider.progress > input[type='range']::-webkit-slider-thumb:active {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_timeline_handler_pressed.png') 1x,
+      url('../assets/100/player_timeline_handler_pressed.png') 2x);

[mtomasz, 2014/01/27 01:09:24]

ditto

[yoshiki, 2014/01/27 07:12:08]

Done.

+}
+
+.custom-slider.progress.disabled > input[type='range']::-webkit-slider-thumb {
+  background-image: none;
+}
+
+.time-controls > .time {
+  cursor: default;
+  height: 100%;
+  position: relative;
+  width: 53px;
+}
+
+.time-controls > .time.disabled {
+  opacity: 0;
+}
+
+.custom-slider > input[type='range'] {
+  -webkit-appearance: none !important;  /* Hide the default thumb icon. */
+  background: transparent;  /* Hide the standard slider bar */
+  height: 100%;
+  left: -2px;  /* Required to align the input element with the parent. */
+  outline: none;
+  position: absolute;
+  top: -2px;
+  width: 100%;
+}
+
+/* Custom thumb icon. */
+.custom-slider > input[type='range']::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  background-position: center center;
+  background-repeat: no-repeat;
+  height: 24px;
+  position: relative;
+  z-index: 2;
+}
+
+/* Custom slider bar (we hide the standard one). */
+.custom-slider > .bar {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_timeline_base_center.png') 1x,
+      url('../assets/200/player_timeline_base_center.png') 2x);
+  /* In order to match the horizontal position of the standard slider bar
+     left and right must be equal to 1/2 of the thumb icon width. */
+  bottom: 15px;
+  left: 14px;  /* Exactly 1/2 of the thumb width */
+  pointer-events: none;  /* Mouse events pass through to the standard input. */
+  position: absolute;
+  right: 14px;
+  top: 15px;
+}
+
+.custom-slider > .bar > .filled,
+.custom-slider > .bar > .cap {
+  bottom: 0;
+  position: absolute;
+  top: 0;
+}
+
+/* The filled portion of the slider bar to the left of the thumb. */
+.custom-slider > .bar > .filled {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_timeline_played_center.png') 1x,
+      url('../assets/200/player_timeline_played_center.png') 2x);
+  border-left-style: none;
+  border-right-style: none;
+  left: 0;
+  width: 0; /* The element style.width is manipulated from the code. */
+}
+
+/* Rounded caps to the left and right of the slider bar. */
+.custom-slider > .bar > .cap {
+  width: 1px;
+}
+
+/* Left cap is always filled, should be the same color as .filled. */
+.custom-slider > .bar > .cap.left {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_timeline_played_left.png') 1x,
+      url('../assets/200/player_timeline_played_left.png') 2x);
+  right: 100%;
+}
+
+/* Right cap is always not filled. */
+.custom-slider > .bar > .cap.right {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_timeline_base_right.png') 1x,
+      url('../assets/200/player_timeline_base_right.png') 2x);
+  left: 100%;
+}
+
+.media-button.disabled,
+.custom-slider.disabled,
+.custom-slider.readonly {
+  pointer-events: none;
+}
+
+/* Progress seek marker (precise time shown on mouse hover. */
+
+/* Thin vertical line across the slider bar */
+.custom-slider > .bar > .seek-mark {
+  background-color: #202020;
+  bottom: -1px;
+  left: 0;
+  position: absolute;
+  top: -1px;
+  width: 0;
+}
+
+.custom-slider > .bar > .seek-mark.visible {
+  width: 1px;
+}
+
+.custom-slider > .bar > .seek-mark.inverted {
+  background-color: #808080;
+}
+
+/* Text label giving the precise time corresponding to the hover position. */
+.custom-slider > .bar > .seek-mark > .seek-label {
+  align-items: center;
+  background: #202020;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
+  bottom: 19px;
+  color: white;
+  display: flex;
+  flex-direction: row;
+  font-size: 12px;
+  height: 15px;
+  justify-content: center;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  transition: opacity 150ms ease;
+}
+
+.custom-slider > .bar > .seek-mark.visible > .seek-label {
+  opacity: 1;
+}
+
+/* Media controls in order of appearance. */
+
+.audio-controls {
+  align-items: center;
+  display: flex;
+  flex-direction: row;
+  height: 100%;
+  justify-content: center;
+}
+
+/* Play/pause button. */
+
+.media-button.toggle input {
+  position: absolute;
+  visibility: hidden;
+}
+
+.media-button.shuffle-mode {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.media-button.shuffle-mode > label > .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_shuffle.png') 1x,
+      url('../assets/200/player_button_shuffle.png') 2x);
+  pointer-events: auto;
+}
+
+.media-button.shuffle-mode > label > input:checked + .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_shuffle_active.png') 1x,
+      url('../assets/200/player_button_shuffle_active.png') 2x);
+}
+
+.media-button.repeat {
+  margin-left: 5px;
+  margin-right: 0;
+}
+
+.media-button.repeat > label > .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_repeat.png') 1x,
+      url('../assets/200/player_button_repeat.png') 2x);
+  pointer-events: auto;
+}
+
+.media-button.repeat > label > input:checked + .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_repeat_active.png') 1x,
+      url('../assets/200/player_button_repeat_active.png') 2x);
+}
+
+.media-button.play {
+  margin-left: 0;
+  margin-right: 0;
+}
+
+.media-button.play > .ended {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_play.png') 1x,
+      url('../assets/200/player_button_play.png') 2x);
+}
+
+.media-button.play > .playing {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_pause.png') 1x,
+      url('../assets/200/player_button_pause.png') 2x);
+}
+
+.media-button.previous {
+  margin-left: 5px;
+  margin-right: 0;
+}
+
+.media-button.previous > .normal {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_previous.png') 1x,
+      url('../assets/200/player_button_previous.png') 2x);
+}
+
+.media-button.next {
+  margin-left: 0;
+  margin-right: 5px;
+}
+
+.media-button.next > .normal {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_next.png') 1x,
+      url('../assets/200/player_button_next.png') 2x);
+}
+
+.media-button.volume {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.media-button.volume > .normal {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_volume.png') 1x,
+      url('../assets/200/player_button_volume.png') 2x);
+}
+
+.media-button.volume > label > .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_volume.png') 1x,
+      url('../assets/200/player_button_volume.png') 2x);
+  pointer-events: auto;
+}
+
+.media-button.volume > label > input:checked + .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_volume_active.png') 1x,
+      url('../assets/200/player_button_volume_active.png') 2x);
+}
+
+.media-button.playlist {
+  margin-left: 5px;
+  margin-right: 5px;
+}
+
+.media-button.playlist > label > .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_playlist.png') 1x,
+      url('../assets/200/player_button_playlist.png') 2x);
+  pointer-events: auto;
+}
+
+.media-button.playlist > label > input:checked + .icon {
+  background-image: -webkit-image-set(
+      url('../assets/100/player_button_playlist_active.png') 1x,
+      url('../assets/200/player_button_playlist_active.png') 2x);
+}
+
+
+/* Invisible div used to compute the width required for the elapsed time. */
+.time-controls > .time > .duration,
+.time-controls > .time > .current {
+  align-items: center;
+  color: #3d3d3d;
+  display: flex;
+  flex-direction: row;
+  font-size: 12px;
+  height: 100%;
+  justify-content: flex-end;
+  position: absolute;
+  top: -1px;
+}
+
+.time-controls > .time > .duration {
+  left: 0;

[mtomasz, 2014/01/27 01:09:24]

Will it work for RTL?

[yoshiki, 2014/01/27 07:12:08]

The audio player must be displayed as LTR even when the display language is RTL.
We don't need to care about RTL language.

[mtomasz, 2014/01/27 09:43:39]

Any background for this decision? I thought we need to support RTL everywhere.

[yoshiki, 2014/01/28 05:57:56]

Let me rephrase it correctly. Some components (eg. inspector, old audio player
and image viewer in Files.app) support RTL language but their UI direction are
LTR. 

Since the old audio players is so, I think it is enough for new audio player as
for now. I'll work it as an another work and file an issue. (And I don't have
enough knowledge about RTL and I have a question to ask it to someone, eg, which
direction does the progress bar in the music player go?)

[mtomasz, 2014/01/28 06:09:45]

I received this guidance about RTL from UX guys: Flip everything.
Basic RTL is easy. Details may be tricky, but we shouldn't worry about it in
early stage I think. So, basically we should use -webkit-margin-start instead of
margin-left, same for paddings. Instead of left: 0 absolute values, we should
use flex. AFAIR this is enough.

I'm fine to work on this separately, but please file a bug.

+}
+
+.time-controls > .time > .current {
+  right: 0;
+}
+
+/* Volume controls: sound button and volume slider */
+
+#volumeContainer {
+  border: 1px solid #ddd;
+  border-radius: 2px;
+  box-shadow: 0 2px 4px #777;
+  height: 110px;
+  position: fixed;
+  width: 32px;
+}
+
+#volumeContainer.default-hidden {
+  visibility: hidden;
+}