player-bar.js

/*
 * 底部的播放条
 * author: Kezhen Wang <latelx64@gmail.com>
 * date: 2015/02/05
 * version: 0.0.1
 */

define(
    ['LocalEvent', 'manSlider'],
    function(LocalEvent, manSlider) {
        "use strict";

        var isInited = false
           ,disabled = false
           ,$player
           ,$playerButtons
           ,$playerPrev
           ,$playerState
           ,$playerNext
           ,$playerOSD
           ,$playerPercentage
           ,$playerPercentageIns
           ,$playerVolume
           ,$playerVolumeMinus
           ,$playerVolumePlus
           ,$playerVolumeIndicator
           ,$playerVolumeIndicatorIns;

        function prepareDom() {
            var self = this;

            $player = $("#player");
            $playerButtons = $player.find('#player-buttons');
            $playerPrev = $('#player-prev');
            $playerState = $('#player-play-state');
            $playerNext = $('#player-next');
            $playerOSD = $('#player-osd');

            this.percentageSlider = $('#player-percentage').manSlider({
                theme: 'kitkat',
                step: 1,
                range: 'min',
                change: function(val) {
                    self.trigger('percentageChanged', val);
                }
            });

            this.volumeSlider = $('#player-volume-indicator').manSlider({
                theme: 'kitkat',
                step: 1,
                value: 100,
                range: 'min',
                change: function(val) {
                    YRAPI.SetVolume(val);
                }
            });

        }

        function bindEvents() {
            var self = this;

            $playerPrev.on('click', function(ev) {
                if (!disabled) {
                    self.trigger('prev');
                }
            });

            $playerState.on('click', function(ev) {
                var $this = $(this);

                if (disabled) {
                    return false;
                }

                if ($this.hasClass('icon-playstate-paused')) {
                    $this
                        .removeClass('icon-playstate-paused')
                        .addClass('icon-playstate-playing');
                    self.trigger('paused');
                }
                else {
                    $this
                        .removeClass('icon-playstate-playing')
                        .addClass('icon-playstate-paused');
                    self.trigger('playing');
                }
            });

            $playerNext.on('click', function(ev) {
                if (!disabled) {
                    self.trigger('next');
                }
            });
        }

        var player = new LocalEvent();

        player.init = function() {
            if (isInited) {
                return this;
            }
            else {
                isInited = true;
            }

            prepareDom.call(this);
            
            bindEvents.call(this);
        };

        player.setOSD = function(text) {
            $playerOSD.html(text);
        };

        player.show = function() {
            if (!isInited) {
                return false;
            }

            $player.addClass('active');
        };

        player.hide = function() {
            $player.removeClass('active');
        };

        player.play = function() {
            $playerState
                .removeClass('icon-playstate-playing')
                .addClass('icon-playstate-paused');
        };

        player.pause = function() {
            $playerState
                .removeClass('icon-playstate-paused')
                .addClass('icon-playstate-playing');
        };

        // 禁用播放条上的控件
        player.disable = function() {
            this.percentageSlider.disable();
            this.volumeSlider.disable();
            disabled = true;
        };

        // 恢复播放条上的控件
        player.enable = function() {
            this.percentageSlider.enable();
            this.volumeSlider.enable();
            disabled = false;
        };

        return player;
    });