Files
dss.web/client/app/directives/audio/audio.player.html
2015-12-16 20:41:17 +00:00

140 lines
8.3 KiB
HTML

<div id="ap1" style="width:100%; " class="skin-wave skin-wave-mode-normal audioplayer loaded">
<div class="audioplayer-inner">
<a class="the-thumb-con">
<div style="background-image:url({{mix.mix_image}})" class="the-thumb"></div>
</a>
<div class="ap-controls">
<dss-waveform class="hidden-xs"></dss-waveform>
<div ng-show="addingComment" class="lower-container add-comment animate-show">
<div class="input-group comment-add-form pull-right">
<span class="input-group-btn">
<button type="button" class="btn btn-primary">
<i class="fa fa-pencil"></i>
</button>
</span>
<input type="text" placeholder="Add comment"
ng-keyup="$event.keyCode == 13 &amp;&amp; addComment($event)"
ng-show="addingComment"
show-focus="addingComment" class="form-control"/>
</div>
</div>
<div ng-hide="addingComment" class="lower-container mix-details animate-show">
<div class="control-container pull-left">
<div class="con-controls">
<div class="the-bg"></div>
<div ng-click="play($event)" class="con-playpause">
<div ng-show="(playState == 0 || playState == 2)" class="playbtn">
<div class="play-icon"></div>
<div class="play-icon-hover"></div>
</div>
<div ng-show="(playState == 1)" class="pausebtn">
<div class="pause-icon">
<div class="pause-part-1"></div>
<div class="pause-part-2"></div>
</div>
<div class="pause-icon-hover"></div>
</div>
</div>
</div>
<div style="left: 56px;" class="meta-artist-con hidden-xs">
<a ui-sref="root.user({user: mix.user.slug})"
class="the-artist ng-binding">
{{mix.user.display_name}}
</a>
<a href="#" ng-click="toggleFollow()" ng-show="currentUser"
uib-tooltip="{{mix.user.is_following ? 'Unfollow' : 'Follow'}} {{mix.user.display_name}}">
<i class="fa fa-user-plus"
ng-class="mix.user.is_following ? 'text-danger' : 'text-success'"></i>
</a>
<div class="meta-artist"><span class="the-name ng-binding">{{mix.title}}</span></div>
</div>
</div>
<div class="activity-container pull-right hidden-xs">
<div ng-show="true" class="form-group remove-margin-top remove-margin-bottom">
<div class="btn-group btn-group-xs">
<ul class="list-nostyle list-horiz">
<li class="stats-item bordered-right">
<button ng-click="shareEmbed()" class="btn btn-small"><i
class="fa fa-wordpress color-blue"></i></button>
</li>
<li class="stats-item bordered-right">
<button ng-click="shareFacebook()" class="btn btn-small"><i
class="fa fa-facebook-square color-blue"></i></button>
</li>
<li class="stats-item bordered-right">
<button class="btn btn-small">
<i ng-click="shareTwitter()" class="fa fa-twitter-square"></i>
</button>
</li>
</ul>
</div>
<div class="btn-group btn-group-xs hidden-xs block-options">
<ul class="list-nostyle list-horiz">
<li title="{{ mix.plays.length }} Plays" class="stats-item bordered-right">
<span uib-tooltip="Plays"
class="btn btn-alt btn-sm btn-default non-url-button">
<i class="fa fa-play-circle"></i>
{{ mix.plays.length }}
</span>
</li>
<li title="{{ mix.downloads.length }} Downloads" class="stats-item bordered-right">
<span ng-show="$root.currentUser">
<button ng-show="mix.is_downloadable" ng-click="downloadFile()"
uib-tooltip="Download"
class="btn btn-alt btn-sm btn-default">
<i class="fa fa-download"></i>
{{ mix.downloads.length }}
</button>
</span>
<span ng-show="!$root.currentUser">
<span ng-show="mix.is_downloadable" uib-tooltip="Login to download"
ng-click="login()" class="btn btn-alt btn-sm btn-default">
<i class="fa fa-download"></i>
{{ mix.downloads.length }}
</span>
</span>
</li>
<li title="{{ mix.likes.length }} Likes" ng-show="$root.currentUser"
class="stats-item bordered-right">
<a ng-click="toggleLike()"
ng-class="mix.is_liked ? 'btn-danger' : 'btn-success'"
uib-tooltip="{{mix.is_liked ? 'Unlike' : 'Like'}}"
class="btn btn-alt btn-sm btn-default"><i
class="fa fa-heart"></i>{{ mix.likes.length }}
</a>
</li>
</ul>
</div>
<div ng-show="mix.can_edit" class="btn-group btn-group-xs hidden-xs">
<ul class="list-nostyle list-horiz">
<li ng-click="editMix(mix)" class="stats-item bordered-right">
<button class="btn btn-small btn-success"><i class="fa fa-pencil-square-o"></i>Edit
</button>
</li>
<li ng-click="deleteMix(mix)" class="stats-item bordered-right">
<button class="btn btn-small btn-danger"><i class="fa fa-times"></i>Delete</button>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<div style="width: 920px; left: 220px;" ng-click="showCommentForm($event)" class="comments-holder active">
<div class="the-bg"></div>
<span ng-style="{'left': + (comment.time_index/mix.duration) * 100 + '%'}"
ng-repeat="comment in comments | filter: { time_index: '!0' }"
class="a-comment with-tooltip">
<div class="aux-padder"></div>
<span style="width: 250px;" class="dzstooltip skin-black">
<span class="the-comment-author">@{{comment.user}}</span> says:<br/>{{comment.comment}}
</span>
<div style="background-image: url({{comment.avatar_image}})" class="the-avatar">
</div>
</span>
</div>
<div class="clear"></div>
</div>