aircox-radiocampus/website/templates/aircox/website/player.html

{% extends 'aircox/cms/list.html' %}

{% load staticfiles %}
{% load i18n %}

{% block header %}
<style>
#player {
    background-color: #212121;
    color: #818181;
    border-radius: 0.2em;
}

.player-box {
    height: 2em;
    border-top-left-radius: 0.5em;
    border-top-right-radius: 0.5em;
    border: 1px #212121 solid;
    border-bottom: none;
}

    .player-box * {
        vertical-align: middle;
    }

    .player-box h3 {
        display: inline-block;
        margin: 0;
        padding: 0;
    }

    .player-button {
        display: inline-block;
        height: 2em;
        width: 2em;
        overflow: hidden;
        cursor: pointer;
        margin-right: 1em;
    }

        .player-button img {
            height: inherit;
            box-shadow: none;
        }

        #player[play] .player-button img {
            margin-left: -100%;
        }

.playlists {}

        .playlists nav {
            font-size: 0.8em;
            border-bottom: 1px solid #007EDF;
        }

        .playlists nav a {
            padding: 0.2em;
            cursor: pointer;
        }

            .playlists nav > *[selected] {
                color: black;
                border-top-right-radius: 0.2em;
                background-color: rgba(0, 126, 223, 0.8);
            }

        .playlists ul:not([selected]) {
            display: none;
        }

.playlist {
    margin: 0;
    padding: 0;
}

    .playlist .item > * {
        display: inline;
        margin: 0.2em;
        vertical-align: center;
    }

    .playlist .item .info {
        float: right;
        font-size: 0.8em;
    }

    .playlist .item a {
        float: right;
        font-weight: bold;
    }

    .playlist .item[selected] .title {
        color: #007EDF;
    }

</style>
<div id="player">
    <div class="player-box">
        <div id="embed-player">
        </div>
        <div id="simple-player">
            <audio preload="metadata">
                Your browser does not support the <code>audio</code> element.
                {% for stream in live_streams %}
                    <source src="{{ stream.detail_url }}">
                {% endfor %}
            </audio>

            <span class="player-button" onclick="player.play()">
                <img src="{% static "aircox/website/player_button.png" %}">
            </span>

            <h3 class="title"></h3>
        </div>
    </div>
    <div class="playlists">
        <nav></nav>
    </div>
    <li class='item' style="display: none;">
        <h2 class="title"></h2>
        <a class="detail">+</a>
        <div class="info"></div>
    </li>
</div>

<script>
function Playlist(id, name, items) {
    this.name = name;

    var self = this;
    this.playlist = document.createElement('ul');
    this.playlist.setAttribute('id', id);
    this.playlist.className = 'playlist list';

    this.tab = document.createElement('a');
    this.tab.addEventListener('click', function(event) {
        player.select_playlist(self);
        event.preventDefault();
    }, true);
    this.tab.className = 'tab';
    this.tab.innerHTML = name;

    player.playlists.appendChild(this.playlist);
    player.playlists.querySelector('nav').appendChild(this.tab);

    self.items = [];
    if(items)
        this.add_list(items);
}

Playlist.prototype = {
    items: undefined,

    /// Create an item and add to the given container [ = this.playlist ]
    add: function (info, container) {
        item = player.player.querySelector('.item');
        item = item.cloneNode(true);
        item.removeAttribute('style');

        if(container)
            container.appendChild(item);
        else
            self.playlist.appendChild(item);

        info.item = item;
        item.info = info;

        item.querySelector('.title').innerHTML = info.title;
        item.querySelector('.detail').href = info.url;
        item.querySelector('.info').innerHTML = info.info || '';

        item.addEventListener('click', function(event) {
            if(event.target.className.indexOf('detail') != -1)
                return;
            player.select(event.currentTarget.info);
            event.preventDefault();
        }, true);
        this.items.push(info);
    },

    /// Add a list of items (optimized)
    add_list: function (items) {
        container = document.createDocumentFragment();
        for(var i = 0; i < items.length; i++)
            this.add(items[i], container);
        this.playlist.appendChild(container);
    },
}


player = {
    /// main container of the player
    player: undefined,
    /// <audio> container
    audio: undefined,

    /// init player
    init: function(id) {
        this.player = document.getElementById(id);
        this.audio = this.player.querySelector('audio');
        this.playlists = this.player.querySelector('.playlists');
        this.live = new Playlist(
            'playlist-live',
            "{% trans "live" %}",
            [ {% for sound in live_streams %}
                { title: "{{ sound.title }}",
                  url: "{{ sound.url }}",
                  stream: "{{ sound.url }}",
                  info: "{{ sound.info }}",
                }, {% endfor %} ]
        );
        this.recents = new Playlist(
            'playlist-recents',
            "{% trans "recents" %}",
            [ {% for sound in last_sounds %}
                { title: "{{ sound.title }}",
                  url: "{{ sound.url }}",
                  {% if sound.related.embed %}
                  embed: "{{ sound.related.embed }}",
                  {% else %}
                  stream: "{{ MEDIA_URL }}{{ sound.related.url|safe }}",
                  {% endif %}
                  info: "{{ sound.related.duration|date:"i:s" }}",
                }, {% endfor %} ]
        );

        this.select_playlist(this.recents);
        this.select(this.live.items[0], false)
    },

    /// update "on_air"
    get_on_air: function() {
      part = Part('').select({
          'title': '.title',
          'url': 'a',
      }, function(r) {
        document.title = r.title;
      });
    },

    /// play a given item { title, src }
    play: function() {
        var player = this.player;
        var audio = this.audio;

        if(audio.paused) {
            audio.play();
            player.setAttribute('play', 'true');
        }
        else {
            audio.pause();
            player.removeAttribute('play');
        }
    },

    /// select the current track to play, and start playing it
    select: function(item, play = true) {
        var audio = this.audio;
        var player = this.player;

        audio.pause();
        audio.src = item.stream;
        audio.load()

        if(this.item && this.item.item)
            this.item.item.removeAttribute('selected')

        this.item = item;

        if(item.item)
            console.log(item.item)
            item.item.setAttribute('selected', 'true');

        player.querySelectorAll('#simple-player .title')[0]
            .innerHTML = item.title;
        player.querySelectorAll('.playlists')[0]
            .setAttribute('playlist', item.playlist);

        if(play)
            this.play();
    },

    /// remove selection using the given selector.
    __unselect: function (selector) {
        v = this.player.querySelectorAll(selector);
        if(v)
            for(var i = 0; i < v.length; i++)
                v[i].removeAttribute('selected');
    },

    /// select current playlist to show
    select_playlist: function(playlist) {
        this.__unselect('.playlists nav .tab[selected]');
        this.__unselect('.playlists .playlist[selected]');

        self.playlist = playlist
        playlist.playlist.setAttribute('selected', 'true');
        playlist.tab.setAttribute('selected', 'true');
    },
}

player.init('player')
</script>
{% endblock %}