android-cloud-H5/static/js/AAC — Audiocogs_files/player.js

function DGPlayer(root) {
    
    // Get elements
    var events = {},
        state = 'paused';
    
    // Preload images
    new Image().src = "/dgplayer/resources/playbutton_active.png";
    new Image().src = "/dgplayer/resources/pausebutton.png";
    new Image().src = "/dgplayer/resources/pausebutton_active.png";
    new Image().src = "/dgplayer/resources/choosefile_pressed.png";
    
    // Prevent text selection in IE
    root.onselectstart = function() {
        return false
    }
    
    var seekBar = (function() {
        
        var loading = root.querySelector(".seek .track .loaded"),
            progress = root.querySelector(".seek .track .progress"),
            played = root.querySelector(".seek span:first-child"),
            remaining = root.querySelector(".seek span:last-child"),
            maxWidth = loading.parentNode.offsetWidth - 2,
            loaded = 0, currentTime = 0, trackLength = 0, oldSeconds = 0;
            
            
        function pad(input) {
            return ("00" + input).slice(-2);
        }
        
        return {
            getTrackLength: function() {
                return trackLength;
            },

            setTrackLength: function(time) {
                trackLength = time;
                this.seekTime = currentTime;
            },

            getCurrentTime: function() {
                return currentTime;
            },

            setCurrentTime: function(time) {
                oldSeconds = Math.floor(currentTime / 1000 % 60);;
                currentTime = time;
                
                if (currentTime >= trackLength && trackLength > 0)
                    emit("pause");

                var t = currentTime / 1000,
                    seconds = Math.floor(t % 60),
                    minutes = Math.floor((t /= 60) % 60);
                    
                if (seconds === oldSeconds)
                    return;
                
                played.innerHTML = minutes + ':' + pad(seconds);
                
                // only show the progress bar and remaining time if we know the duration
                if (trackLength > 0) {
                    var r = (trackLength - currentTime) / 1000,
                        remainingSeconds = Math.floor(r % 60),
                        remainingMinutes = Math.floor((r /= 60) % 60);
                    
                    remaining.innerHTML = '-' + remainingMinutes + ':' + pad(remainingSeconds);
                    position = Math.max(0, Math.min(1, currentTime / trackLength));
                    progress.style.width = maxWidth * position + 'px';
                } else {
                    remaining.innerHTML = '-0:00';
                }
            },
            
            getAmountLoaded: function() {
                return loaded;
            },
            
            setAmountLoaded: function(val) {
                loaded = Math.max(0, Math.min(100, val));
                loading.style.width = maxWidth * (loaded / 100) + 'px';
            }
        }
        
    })();
        
    var playpause = (function() {
        
        var button = root.querySelector(".button"),
            interval = null, playing = false;
            
        button.onclick = function() {
            emit(playing ? "pause" : "play");
        };

        root.addEventListener('keyup', function(e) {
            e.which === 32 && emit(playing ? "pause" : "play");
        });
        
        function setPlaying(play) {
            if (playing = play)
                button.classList.add("pause");
            else
                button.classList.remove("pause");
        }
        
        return {
            setPlaying: setPlaying,
            getPlaying: function() {
                return playing;
            }
        }
        
    })();
    
    var slider = (function() {
        
        var handle = root.querySelector(".volume .handle"),
            progress = root.querySelector(".volume .progress"),
            track = root.querySelector(".volume .track")
            volumeLeft = root.querySelector(".volume img:first-child"),
            volumeRight = root.querySelector(".volume img:last-child");
            
        var lastY = 0, 
            down = false,
            height = 65,
            handleSize = 20,
            min = -8,
            max = height - handleSize / 2 - 3,
            curY = Math.floor(height / 2 - handleSize / 2),
            value = 50;
            
        function update(dontEmit) {
            if ('webkitTransform' in handle.style)
                handle.style.webkitTransform = "translate3d(0, " + (-max - min + curY) + "px" + ", 0)";
            else
                handle.style.bottom = max + min - curY + "px";

            progress.style.height = max - curY + "px";
            value = Math.round(100 - (curY - min) / (max - min) * 100);
            
            if (!dontEmit)
                emit("volume", value);
        }
        update();
        
        handle.onmousedown = handle.ontouchstart = function(e) {
            lastY = e.targetTouches ? e.targetTouches[0].pageY : e.clientY;
            down = true;
            e.stopPropagation();
            handle.classList.add("active");
            e.preventDefault();
        }
        
        function onMove(e) {
            var eventY = e.targetTouches ? e.targetTouches[0].pageY : e.clientY;
            var y = Math.max(min, Math.min(max, curY + eventY - lastY));
            if (!down || y === curY) return;

            curY = y;
            lastY = eventY;
            update();
        }
        
        function onUp(e) {
            if(!down) return;
            down = false;
            handle.classList.remove("active");
        }
        
        document.addEventListener("mousemove", onMove, false);
        document.addEventListener("touchmove", onMove, false);
        document.addEventListener("mouseup", onUp, false);
        document.addEventListener("touchend", onUp, false);
        
        // Handle clicking on the minimum and maximum volume icons
        function animate() {
            handle.classList.add("animatable");
            progress.classList.add("animatable");

            update();

            setTimeout(function() {
                handle.classList.remove("animatable");
                progress.classList.remove("animatable");
            }, 250);
        }
        
        volumeLeft.onclick = function() {
            curY = min;
            animate();
        }

        volumeRight.onclick = function() {
            curY = max;
            animate();
        }
        
        // Handle clicking on the track
        track.onmousedown = track.ontouchstart = function(e) {
            var y = e.targetTouches ? e.targetTouches[0].pageY : e.clientY;
            
            // Get the absolute offsetTop of the track
            var offset = 0, obj = track;
            while (obj) {
                offset += obj.offsetTop - obj.scrollTop;
                obj = obj.offsetParent;
            }
            
            curY = Math.max(min, Math.min(max, y - offset - (handleSize + min)));
            handle.onmousedown(e);
            update();
        }
        
        return {
            getValue: function() {
                return value;
            },
            
            setValue: function(val) {
                val = Math.max(0, Math.min(100, val));
                curY = max - (val / 100) * (max - min);
                update(true);
            }
        }
        
    })();
    
    var filebutton = (function() {
        
        var button = root.querySelector('.file_button'),
            input = document.createElement('input');
            
        input.setAttribute('type', 'file');
        input.style.opacity = 0;
        input.style.position = 'absolute';
        input.style.left = '-1000px';
        
        input.onchange = function(e) {
            emit('file', input.files[0]);
        }
        
        button.onclick = function() {
            input.click();
			 console.log("bbbbbbbbbbbbb");
        }
        
    })();
    
    function emit(event) {
        if (!events[event]) return;
        
        var args = Array.prototype.slice.call(arguments, 1),
            callbacks = events[event];
            
        for (var i = 0, len = callbacks.length; i < len; i++) {
            callbacks[i].apply(null, args);
        }
    } 
    
    var API = {
        on: function(event, fn) {
            events[event] || (events[event] = []);
            events[event].push(fn);
        },
        
        off: function(event, fn) {
            var eventsOf = events[event],
                index = eventsOf.indexOf(fn);
                
            ~index && eventsOf.splice(index, 1);
        }
    };
    
    // Object.defineProperty shim for Opera
    Object.defineProperty || (Object.defineProperty = function(obj, prop, config) {
        if (config.get && obj.__defineGetter__)
            obj.__defineGetter__(prop, config.get);
            
        if (config.set && obj.__defineSetter__)
            obj.__defineSetter__(prop, config.set);
    })
    
    Object.defineProperty(API, "bufferProgress", {
        get: seekBar.getAmountLoaded,
        set: seekBar.setAmountLoaded
    });
    
    Object.defineProperty(API, "state", {
        set: function(newstate) {
            playpause.setPlaying(newstate == 'playing' || newstate == 'buffering');                
            state = newstate;
        },
        
        get: function() { 
            return state;
        }
    });
    
    Object.defineProperty(API, "duration", {
        get: seekBar.getTrackLength,
        set: seekBar.setTrackLength
    });
    
    Object.defineProperty(API, "seekTime", {
        get: seekBar.getCurrentTime,
        set: seekBar.setCurrentTime
    });
    
    Object.defineProperty(API, "volume", {
        get: slider.getValue,
        set: slider.setValue
    });
    
    var img = root.querySelector(".avatar img");
    Object.defineProperty(API, "coverArt", {
        get: function() {
            return img.src;
        },
        
        set: function(src) {
            img.src = src;
        }
    });
    
    var title = root.querySelector("span.title"),
        artist = root.querySelector("span.artist");
        
    Object.defineProperty(API, "songTitle", {
        get: function() {
            return title.innerHTML;
        },
        
        set: function(val) {
            title.innerHTML = val;
        }
    });
    
    Object.defineProperty(API, "songArtist", {
        get: function() {
            return artist.innerHTML;
        },
        
        set: function(val) {
            artist.innerHTML = val;
        }
    });
    
    var description = root.querySelector('.file_description');
    Object.defineProperty(API, "fileDescription", {
        get: function() {
            return description.innerHTML;
        },
        
        set: function(val) {
            description.innerHTML = val;
        }
    });
    
    return API;
    
}