silk-gui/apps/zodern-stretto/views/mobile.html

GUI for developers and Node OS

{% extends 'base/main_base.html' %}

{% block title %}Music{% endblock %}

{% block content %}
<div id="wrapper" tabindex="0">
  <div id="current_info"></div>
  <div id='sidebar'>
  </div>
  <div id='content' class="custom_scrollbar">
  </div>
  <div id='bottom_bar' class='disable_selection' tabindex="1">
    <div class='current_time'></div>
    <div class='duration'></div>
    <input type="text" id="scrub_bar" data-slider-value="0" data-slider-id="scrub_bar_slider" value="" data-slider-max="100" data-slider-step="0.1" data-slider-tooltip="hide" />
    <div class="controls">
      <i id="repeat" class="fa fa-retweet fa-3x blue"></i>
      <span id="repeat_badge" class="badge hidden">1</span>
      <i id="prev" class="fa fa-fast-backward fa-3x"></i>
      <i id="playpause" class="fa fa-play fa-3x"></i>
      <i id="next" class="fa fa-fast-forward fa-3x"></i>
      <i id="shuffle" class="fa fa-random fa-3x"></i>
    </div>
  </div>
</div>
<audio id='current_track'><source id="current_src" type='audio/mpeg'></audio>
<div class="options_container"></div>
<div class='hidden'>
  <div id="player"></div>
</div>
{% raw %}
<script type="text/swig" id='sidebar_template'>
  <div id="sidebar_height_wrapper">
    <div class="input-group input-group-sm">
      <span class="input-group-addon"><i class='fa fa-search'></i></span>
      <input type="text" class="form-control search-input" placeholder="Search" value="{{search}}">
    </div>
    <h3>{{title}}</h3>
    <ul class="nav disable_selection">
      {% if fixed %}<li class='dropdown-header'>Auto-Playlists</li>{% endif %}
      {% for playlist in fixed %}
        <li><a href="#playlist/{{playlist.attributes._id}}">{{playlist.attributes.title}}</a></li>
      {% endfor %}
      {% if fixed %}<li class='dropdown-header'>Playlists</li>{% endif %}
      {% for playlist in editable %}
        <li><a href="#playlist/{{playlist.attributes._id}}">{{playlist.attributes.title}}</a></li>
      {% endfor %}
    </ul>
  </div>
</script>
<script type='text/swig' id='song_template'>
  <h1>{{title}}
  {% if editable %}
    <div class="btn-group">
      <button type="button" class="btn btn-default btn-sm dropdown-toggle" data-toggle="dropdown">
        Options <span class="caret"></span>
      </button>
      <ul class="dropdown-menu" role="menu">
        <li><a class='download_playlist' target='_blank' href='/downloadplaylist/{{_id}}'>Download Playlist</a></li>
        <li><a class='rename_playlist'>Rename Playlist</a></li>
        <li><a class='delete_playlist'>Delete Playlist</a></li>
      </ul>
    </div>
  {% endif %}</h1>
  <table class='table song_table disable_selection'>
    <thead>
      <th class='title_th'>Title
        {% if sort_col == 'title' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
      <th class='display_artist_th'>Artist
        {% if sort_col == 'display_artist' %}{% if sort_asc %}<i class="fa fa-chevron-up"></i>{% else %}<i class="fa fa-chevron-down"></i>{% endif %}{% endif %}
      </th>
    </thead>
    <tbody class='song_body'>
      <tr id="top-spacer" data-index='spacer' style="height: 0"/>
      <tr id="bottom-spacer" data-index='spacer' style="height: 0"/>
    </tbody>
  </table>
</script>
<script type='text/swig' id='song_item'>
<tr id="{{song.attributes._id}}" data-index="{{index}}" class='song_row {% if selected %}selected{% endif %}'>
<td>
  <div class='option_div'>
    <i class='fa fa-plus-square-o options'></i>
  </div>
  <img class='cover' src='{{song.getCover()}}'/>
  <span class='song_text'>{{song.attributes.title}}</span>
</td>
<td>{{song.attributes.display_artist}}</td>
</tr>
</script>
<script type="text/swig" id="current_info_template">
  <img class='info_cover' src='{{song.getCover()}}'/>
  <div class='info_wrapper'>
    <p class="info_title">{{song.attributes.title}}</p>
    <p class="info_detail"><span class='colsearch'>{{song.attributes.display_artist}}</span> - <span class='colsearch'>{{song.attributes.album}}</span></p>
  </div>
</script>
<script type="text/swig" id="options_template">
<div class="dropdown open {{dropup}}">
  <ul class="dropdown-menu options-menu custom_scrollbar" role="menu">
    {% if type == 'youtube' %}
      <li class="save_youtube"><a>Save to Library</a></li>
    {% endif %}
    <li class='add_to_queue'><a>Add to Queue</a></li>
    {% if numSelected == 1 %}
      {% if type == 'normal' %}
        <li class="view_info"><a>Detailed Info</a></li>
      {% endif %}
      <li class="similar_songs"><a>Generate Mix</a></li>
    {% endif %}
    {% if type == 'normal' %}
      <li class="rewrite_tags"><a>Write metadata to file</a></li>
      {% if current_playlist.editable %}
        <li class='remove_from_playlist' id='{{current_playlist._id}}'><a>Remove from playlist</a></li>
      {% endif %}
      <li class="hard_rescan"><a>Hard Rescan</a></li>
      <li class="divider"></li>
      {% if recents.length %}
        <li role="presentation" class="dropdown-header">Recents</li>
        {% for playlist in recents %}
          {% if playlist.attributes.editable %}
          <li class='add_to_playlist' id="{{playlist.attributes._id}}"><a>{{playlist.attributes.title}}</a></li>
          {% endif %}
        {% endfor %}
      {% endif %}
      <li role="presentation" class="dropdown-header">Add to Playlist</li>
      {% for playlist in playlists %}
        {% if playlist.attributes.editable %}
        <li class='add_to_playlist' id="{{playlist.attributes._id}}"><a>{{playlist.attributes.title}}</a></li>
        {% endif %}
      {% endfor %}
    {% endif %}
  </ul>
</div>
</script>
<script type="text/swig" id="settings_bar_template">
  <i class="fa fa-volume-up fa-2x volume_icon"></i>
  <input type="text" id="vol_bar" data-slider-id="vol_bar_slider" data-slider-max="100" data-slider-step="0.1" data-slider-value="{{vol}}" data-slider-tooltip="hide" />
  <button id='remote_setup' class='btn btn-primary'>Remote Setup</button>
</script>
<script type="text/swig" id="control_template">
  <p>This functionality allows you to control you music player by going to <code>{{host}}/remote</code></p>
  <div class='form-horizontal'>
    <div class="form-group">
      <label for="comp_name_input" class='col-sm-3'>Remote name</label>
      <div class='col-sm-9'>
        <input class="form-control" id="comp_name_input" type="text" value="{{comp_name}}" placeholder="Living Room Computer" />
      </div>
    </div>
  </div>
</script>
{% endraw %}
<script type="text/javascript">
var this_ip = "{{ip}}";
var country_code = "{{country_code}}";
var on_mobile = true;
</script>
{% endblock %}
{% block scripts %}
<script type="text/javascript">
  head.load(
    "static/css/mobile.css"
  );
</script>
{% endblock %}