ui/file_manager/file_manager/audio_player.html - chromium/src.git - Git at Google

 <!--
   -- 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.
   -->
 <!DOCTYPE HTML>
 <html>
 <head>
   <!-- We have to set some default title, or chrome will use the page name.
     -- As soon as the i18n'd strings are loaded we replace it with the correct
     -- string. Until then, use an invisible non-whitespace character.
     -->
   <title>&#xFEFF;</title>
   <link rel="stylesheet" type="text/css" href="audio_player/css/audio_player.css">

   <!-- Don't load mediaplayer_scripts.js when flattening is disabled -->
   <if expr="False"><!-- </if>
     <script src="audio_player/js/audio_player_scripts.js"></script>
   <if expr="False"> --></if>
   <if expr="False">
     <!-- This section is used when the file manager is loaded with
          'filemgr-ext-path' command-line flag. -->
     <!-- Keep the list in sync with audio_player_scripts.js. -->
     <script src="../../../../ui/webui//resources/js/cr.js"></script>
     <script src="../../../../ui/webui/resources/js/cr/event_target.js"></script>
     <script src="../../../../ui/webui/resources/js/cr/ui/array_data_model.js">
     </script>

     <script src="../../../../third_party/polymer/components/polymer/polymer.js"></script>

     <script src="common/js/async_util.js"></script>
     <script src="common/js/file_type.js"></script>
     <script src="common/js/util.js"></script>
     <script src="common/js/volume_manager_common.js"></script>
     <script src="foreground/js/volume_manager_wrapper.js"></script>

     <script src="audio_player/js/audio_player.js"></script>

     <script src="audio_player/elements/track_list.js"></script>
     <script src="audio_player/elements/control_panel.js"></script>
     <script src="audio_player/elements/volume_controller.js"></script>
     <script src="audio_player/elements/audio_player.js"></script>
    </if>
  </head>
 <body>
   <!-- Definition of <track-list> tag. -->
   <polymer-element name="track-list" attributes="tracks">
     <template>
       <link rel="stylesheet" href="audio_player/elements/track_list.css">
       <template id="tracks" repeat="{{track, index in tracks}}">
         <div class="track" active?="{{track.active}}" index="{{index}}" on-click="{{trackClicked}}">
           <div class="data">
             <div class="data-title">{{track.title}}</div>
             <div class="data-artist">{{track.artist}}</div>
           </div>
         </div>
       </template>
     </template>
   </polymer-element>

   <!-- Definition of <control-panel> tag. -->
   <polymer-element name="control-panel">
     <template>
       <link rel="stylesheet" href="audio_player/elements/control_panel.css">

       <div class="controls">
         <div class="upper-controls time-controls">
           <div class="time media-control">
             <div class="current">{{timeString_}}</div>
           </div>
           <div class="progress media-control custom-slider">
             <input name="timeInput"
                    type="range"
                    min="0" max="{{duration}}" value="{{time}}">
             <div class="bar">
               <div class="filled" style="width: {{time/duration*100}}%;"></div>
               <div class="cap left"></div>
               <div class="cap right"></div>
             </div>
           </div>
           <div class="time media-control">
             <div class="duration">{{durationString_}}</div>
           </div>
         </div>
         <div class="lower-controls audio-controls">
           <!-- Shuffle toggle button in the bottom line. -->
           <button class="shuffle-mode media-button toggle" state="default">
             <label>
               <input id="shuffleCheckbox"
                      type="checkbox"
                      checked="{{model.shuffle}}">
               <span class="icon"></span>
             </label>
           </button>

           <!-- Repeat toggle button in the bottom line. -->
           <button class="repeat media-button toggle" state="default">
             <label>
               <input id="repeatCheckbox"
                      type="checkbox"
                      checked="{{model.repeat}}">
               <span class="icon"></span>
             </label>
           </button>

           <!-- Prev button in the bottom line. -->
           <button class="previous media-button"
                  state="default"
                  on-click="{{previousClick}}">
             <div class="normal default"></div>
             <div class="disabled"></div>
           </button>

           <!-- Play button in the bottom line. -->
           <button class="play media-control media-button"
                   state='{{playing ? "playing" : "ended"}}'
                   on-click="{{playClick}}">
             <div class="normal playing"></div>
             <div class="normal ended"></div>
             <div class="disabled"></div>
           </button>

           <!-- Next button in the bottom line. -->
           <button class="next media-button"
                   state="default"
                   on-click="{{nextClick}}">
             <div class="normal default"></div>
             <div class="disabled"></div>
           </button>

           <div id="volumeContainer"
                class="default-hidden"
                anchor-point="bottom center">
             <volume-controller id="volumeSlider"
                                width="32" height="85" value="50">
             </volume-controller>

             <polymer-anchor-point id="anchorHelper"></polymer-anchor-point>
           </div>

           <!-- Volume button in the bottom line. -->
           <button id="volumeButton"
                   class="volume media-button toggle"
                   state="default"
                   on-click="{{volumeButtonClick}}"
                   anchor-point="bottom center">
             <label>
               <input type="checkbox" checked="{{volumeSliderShown}}">
               <span class="icon"></span>
             </label>
           </button>

           <!-- Playlist button in the bottom line. -->
           <button id="playlistButton"
                   class="playlist media-button toggle"
                   state="default">
             <label>
               <input type="checkbox" checked="{{model.expanded}}">
               <span class="icon"></span>
             </label>
           </button>
         </div>
       </div>
     </template>
   </polymer-element>

   <!-- Definition of <volume-controller> tag. -->
   <polymer-element name="volume-controller" attributes="width height value">
     <template>
       <link rel="stylesheet" href="audio_player/elements/volume_controller.css">

       <div id="background"></div>
       <input name="rawValueInput" id="rawValueInput"
              type="range" min="0" max="100" value="{{rawValue}}">
       <div id="bar">
         <div class="filled" style="height: {{rawValue}}%;"></div>
         <div class="cap left"></div>
         <div class="cap right"></div>
       </div>
     </template>
   </polymer-element>

   <!-- Definition of <audio-player> tag. -->
   <polymer-element name="audio-player"
                    attributes="playing currenttrackurl playcount">
     <template>
       <link rel="stylesheet" href="audio_player/elements/audio_player.css">

       <track-list id="trackList" expanded?="{{model.expanded}}"
                   on-replay="{{onReplayCurrentTrack}}"></track-list>
       <control-panel id="audioController"
                      on-next-clicked="{{onControllerNextClicked}}"
                      on-previous-clicked="{{onControllerPreviousClicked}}">
       </control-panel>
       <audio id="audio"></audio>
     </template>
   </polymer-element>

   <div class="audio-player">
     <!-- Place the audio player. -->
     <audio-player></audio-player>
   </div>
 </body>
 </html>
	<!--
	-- 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.
	-->
	<!DOCTYPE HTML>
	<html>
	<head>
	<!-- We have to set some default title, or chrome will use the page name.
	-- As soon as the i18n'd strings are loaded we replace it with the correct
	-- string. Until then, use an invisible non-whitespace character.
	-->
	<title></title>
	<link rel="stylesheet" type="text/css" href="audio_player/css/audio_player.css">

	<!-- Don't load mediaplayer_scripts.js when flattening is disabled -->
	<if expr="False"><!-- </if>
	<script src="audio_player/js/audio_player_scripts.js"></script>
	<if expr="False"> --></if>
	<if expr="False">
	<!-- This section is used when the file manager is loaded with
	'filemgr-ext-path' command-line flag. -->
	<!-- Keep the list in sync with audio_player_scripts.js. -->
	<script src="../../../../ui/webui//resources/js/cr.js"></script>
	<script src="../../../../ui/webui/resources/js/cr/event_target.js"></script>
	<script src="../../../../ui/webui/resources/js/cr/ui/array_data_model.js">
	</script>

	<script src="../../../../third_party/polymer/components/polymer/polymer.js"></script>

	<script src="common/js/async_util.js"></script>
	<script src="common/js/file_type.js"></script>
	<script src="common/js/util.js"></script>
	<script src="common/js/volume_manager_common.js"></script>
	<script src="foreground/js/volume_manager_wrapper.js"></script>

	<script src="audio_player/js/audio_player.js"></script>

	<script src="audio_player/elements/track_list.js"></script>
	<script src="audio_player/elements/control_panel.js"></script>
	<script src="audio_player/elements/volume_controller.js"></script>
	<script src="audio_player/elements/audio_player.js"></script>
	</if>
	</head>
	<body>
	<!-- Definition of <track-list> tag. -->
	<polymer-element name="track-list" attributes="tracks">
	<template>
	<link rel="stylesheet" href="audio_player/elements/track_list.css">
	<template id="tracks" repeat="{{track, index in tracks}}">
	<div class="track" active?="{{track.active}}" index="{{index}}" on-click="{{trackClicked}}">
	<div class="data">
	<div class="data-title">{{track.title}}</div>
	<div class="data-artist">{{track.artist}}</div>
	</div>
	</div>
	</template>
	</template>
	</polymer-element>

	<!-- Definition of <control-panel> tag. -->
	<polymer-element name="control-panel">
	<template>
	<link rel="stylesheet" href="audio_player/elements/control_panel.css">

	<div class="controls">
	<div class="upper-controls time-controls">
	<div class="time media-control">
	<div class="current">{{timeString_}}</div>
	</div>
	<div class="progress media-control custom-slider">
	<input name="timeInput"
	type="range"
	min="0" max="{{duration}}" value="{{time}}">
	<div class="bar">
	<div class="filled" style="width: {{time/duration*100}}%;"></div>
	<div class="cap left"></div>
	<div class="cap right"></div>
	</div>
	</div>
	<div class="time media-control">
	<div class="duration">{{durationString_}}</div>
	</div>
	</div>
	<div class="lower-controls audio-controls">
	<!-- Shuffle toggle button in the bottom line. -->
	<button class="shuffle-mode media-button toggle" state="default">
	<label>
	<input id="shuffleCheckbox"
	type="checkbox"
	checked="{{model.shuffle}}">
	<span class="icon"></span>
	</label>
	</button>

	<!-- Repeat toggle button in the bottom line. -->
	<button class="repeat media-button toggle" state="default">
	<label>
	<input id="repeatCheckbox"
	type="checkbox"
	checked="{{model.repeat}}">
	<span class="icon"></span>
	</label>
	</button>

	<!-- Prev button in the bottom line. -->
	<button class="previous media-button"
	state="default"
	on-click="{{previousClick}}">
	<div class="normal default"></div>
	<div class="disabled"></div>
	</button>

	<!-- Play button in the bottom line. -->
	<button class="play media-control media-button"
	state='{{playing ? "playing" : "ended"}}'
	on-click="{{playClick}}">
	<div class="normal playing"></div>
	<div class="normal ended"></div>
	<div class="disabled"></div>
	</button>

	<!-- Next button in the bottom line. -->
	<button class="next media-button"
	state="default"
	on-click="{{nextClick}}">
	<div class="normal default"></div>
	<div class="disabled"></div>
	</button>

	<div id="volumeContainer"
	class="default-hidden"
	anchor-point="bottom center">
	<volume-controller id="volumeSlider"
	width="32" height="85" value="50">
	</volume-controller>

	<polymer-anchor-point id="anchorHelper"></polymer-anchor-point>
	</div>

	<!-- Volume button in the bottom line. -->
	<button id="volumeButton"
	class="volume media-button toggle"
	state="default"
	on-click="{{volumeButtonClick}}"
	anchor-point="bottom center">
	<label>
	<input type="checkbox" checked="{{volumeSliderShown}}">
	<span class="icon"></span>
	</label>
	</button>

	<!-- Playlist button in the bottom line. -->
	<button id="playlistButton"
	class="playlist media-button toggle"
	state="default">
	<label>
	<input type="checkbox" checked="{{model.expanded}}">
	<span class="icon"></span>
	</label>
	</button>
	</div>
	</div>
	</template>
	</polymer-element>

	<!-- Definition of <volume-controller> tag. -->
	<polymer-element name="volume-controller" attributes="width height value">
	<template>
	<link rel="stylesheet" href="audio_player/elements/volume_controller.css">

	<div id="background"></div>
	<input name="rawValueInput" id="rawValueInput"
	type="range" min="0" max="100" value="{{rawValue}}">
	<div id="bar">
	<div class="filled" style="height: {{rawValue}}%;"></div>
	<div class="cap left"></div>
	<div class="cap right"></div>
	</div>
	</template>
	</polymer-element>

	<!-- Definition of <audio-player> tag. -->
	<polymer-element name="audio-player"
	attributes="playing currenttrackurl playcount">
	<template>
	<link rel="stylesheet" href="audio_player/elements/audio_player.css">

	<track-list id="trackList" expanded?="{{model.expanded}}"
	on-replay="{{onReplayCurrentTrack}}"></track-list>
	<control-panel id="audioController"
	on-next-clicked="{{onControllerNextClicked}}"
	on-previous-clicked="{{onControllerPreviousClicked}}">
	</control-panel>
	<audio id="audio"></audio>
	</template>
	</polymer-element>

	<div class="audio-player">
	<!-- Place the audio player. -->
	<audio-player></audio-player>
	</div>
	</body>
	</html>