Source: widgets/bingewatch.js

define('application/widgets/bingewatch', [
    'application/widgets/pointerfocusablebutton',
    'rofl/widgets/container',
    'rofl/widgets/label',
    'rofl/lib/l10n',
    'application/utils',
    'application/widgets/bingeborder'
], function (
    Button,
    Container,
    Label,
    L10N,
    AppUtils,
    BingeBorder
) {
    'use strict';

    var l10n = L10N.getInstance();

    return Container.extend({

        /**
         * Initialises the widget.
         *
         * @param {Object} opt - The options.
         */
        init: function init (opt) {
            init.base.call(this);

            this._callback = opt.callback;
            this.addClass('bingewatch');
            this._build();
        },

        /**
         * Builds the widget.
         *
         * @private
         */
        _build: function () {
            var gradient;

            this._button = this.appendChildWidget(new Button('binge'));

            gradient = this._button.appendChildWidget(new Container());
            gradient.addClass('gradient');

            this._title = this._button.appendChildWidget(new Label({
                text: '',
                classNames: 'title'
            }));

            this._subtitle = this._button.appendChildWidget(new Label({
                text: '',
                classNames: 'subtitle'
            }));

            this._countdown = this.appendChildWidget(new Label({
                text: '',
                classNames: 'countdown',
                enableHTML: true
            }));

            this._countdownbutton = this._button.appendChildWidget(new Container());
            this._countdownbutton.addClass('countdown-container');

            this._countdownbutton.appendChildWidget(new Label({ text: '', classNames: ['v-align-helper'] }));
            this._countdownbutton.appendChildWidget(new Label({ text: '', classNames: ['v-align-target', 'icon-play-v2'] }));

            this._border = this._countdownbutton.appendChildWidget(new BingeBorder());
            this._border.addClass('border');
        },

        /**
         * Sets the episode.
         *
         * @param {Object} episode - The episode data.
         */
        setEpisode: function (episode) {
            this._episode = episode;

            this._button.setStyleTo('background-image', 'url(' + episode.getImageUrl() + ')');
            this._title.setText(episode.getEpisodeNumber() + '. ' + episode.getTitle());
            this._subtitle.setText(AppUtils.secondsHumanReadableString(episode.getDuration()));
            this._countdown.setText(l10n.get('bingewatch.count', {sec: '5'}));
        },

        /**
         * Starts the countdown.
         */
        start: function () {
            var x = 5,
                self = this,
                tick;

            this.stop();
            this._border.addClass('animate');

            tick = function () {
                if (x !== 1) {
                    x--;
                    if (x === 1) {

                        self._countdown.setText(l10n.get('bingewatch.countsingle', {sec: x}));
                    } else {
                        self._countdown.setText(l10n.get('bingewatch.count', {sec: x}));
                    }
                    self._timeout = setTimeout(tick, 1000);
                } else if (x === 1) {
                    if (self._callback) {
                        self.stop();
                        self._callback();
                    }
                }
            };

            this._timeout = setTimeout(tick, 1000);
        },

        /**
         * Sets the focus.
         */
        focus: function () {
            this._button.focus();
        },

        /**
         * Stops the countdown.
         */
        stop: function () {
            this._border.removeClass('animate');
            clearTimeout(this._timeout);
        }
    });
});