Mediaplayer: api

app.css

.customer-photo {
    display: inline-block;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-size: 32px 35px;
    background-position: center center;
    vertical-align: middle;
    line-height: 32px;
    box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
    margin-left: 5px;
}

.customer-name {
    display: inline-block;
    vertical-align: middle;
    line-height: 32px;
    padding-left: 3px;
}

app.html

<template>
  <require from="aurelia-kendoui-bridge/mediaplayer/mediaplayer"></require>
  <require from="aurelia-kendoui-bridge/numerictextbox/numerictextbox"></require>
  
  <div class="demo-section k-content wide" style="max-width: 900px;">
            
    <div id="mediaPlayer" style="height:360px"
         ak-mediaplayer="k-media.bind: { title: 'Recap of Progress', source: 'https://www.youtube.com/watch?v=tc3xhD24iTU' };
         k-navigatable.bind: true;
         k-widget.bind:mediaPlayer"></div>
    </div>

    <div class="box wide float_center" style="max-width:900px;">
        <h4>API Functions</h4>
        <div class="box-col">
            <ul class="options">
                <li>
                    <button id="playButton" click.delegate="onPlay()" class="k-button">Play</button>
                </li>
                <li>
                    <button id="stopButton" click.delegate="onStop()" class="k-button">Stop</button>
                </li>
                <li>
                    <button id="pauseButton" click.delegate="onPause()" class="k-button">Pause</button>
                </li>
                <li>
                    <button id="fullScreenButton" click.delegate="onFullscreen()" class="k-button">Full-screen</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <ul class="options">
                <li>
                    <button id="toggleMuteButton" click.delegate="onMute()" class="k-button">Toggle mute</button>
                </li>
                <li>
                    <button id="isEndedButton" click.delegate="onEnded()" class="k-button">Video has ended</button>
                </li>
                <li>
                    <button id="isPausedButton" click.delegate="onPaused()" class="k-button">Video is paused</button>
                </li>
                <li>
                    <button id="isPlayingButton" click.delegate="onPlaying()" class="k-button">Video is playing</button>
                </li>
            </ul>
        </div>
        <div class="box-col">
            <ul class="options">
                <li>
                    <input id="volumeValue" style="float:none; width:90px;" ak-numerictextbox="k-value.bind: 50; k-widget.two-way: valueVolume"
                    k-on-change.delegate="setVolume()" style="float:none" />
                    <button id="set" class="k-button" click.delegate="setVolume()">Set volume</button>  
                </li>
                <li>
                    <input id="seekValue" style="float:none; width:90px;" ak-numerictextbox="k-value.bind: 50; k-widget.two-way: valueSeek"
                    k-on-change.delegate="seekTo()" style="float:none" />
                    <button id="set" class="k-button" click.delegate="seekTo()">Seek to</button>  
                </li>                
            </ul>            
        </div>
    </div>

</template>

app.js

export class Playlist {
  
    onPlay() {
        this.mediaPlayer.play();
    }

    onStop() {
        this.mediaPlayer.stop();
    }

    onPause() {
        this.mediaPlayer.pause();
    }

    onFullscreen() {
        this.mediaPlayer.fullScreen(true);
    }

    onMute() {
        this.mediaPlayer.mute(!this.mediaPlayer.mute());
    }

    onEnded() {
        alert(this.mediaPlayer.isEnded());
    }

    onPaused() {
        alert(this.mediaPlayer.isPaused());
    }

    onPlaying() {
        alert(this.mediaPlayer.isPlaying());
    }

    seekTo() {
        this.mediaPlayer.seek(this.valueSeek.value());
    }

    setVolume() {
        this.mediaPlayer.volume(this.valueVolume.value());
    }
}

index.html

<!doctype html>
<html>
  <head>
    <title>Aurelia KendoUI bridge</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.common.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.rtl.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.default.min.css">
    <link rel="stylesheet" href="https://kendo.cdn.telerik.com/2017.2.621/styles/kendo.mobile.all.min.css">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bluebird/3.4.0/bluebird.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.1/chroma.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jquery.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/jszip.min.js"></script>
    <script src="https://kendo.cdn.telerik.com/2017.2.621/js/kendo.all.min.js"></script>
  </head>
  <body aurelia-app="main">
    <h1>Loading...</h1>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.6/system.js"></script>
    <script src="https://rawgit.com/aurelia-ui-toolkits/aurelia-kendoui-bundles/1.6.0/config2.js"></script>
    <script>
      System.import('aurelia-bootstrapper');
    </script>
  </body>
</html>

logger.html

<template>
  <div class="console">
  </div>
</template>

logger.js

export class Logger {
  attached() {
    this.overrideStyles();
  }


  log(message, isError, container) {
    let lastContainer = $('.console div:first', container);
    let counter = lastContainer.find('.count').detach();
    let lastMessage = lastContainer.text();
    let count = 1 * (counter.text() || 1);

    lastContainer.append(counter);

    if (!lastContainer.length || message !== lastMessage) {
      $('<div' + (isError ? ' class=\'error\'' : '') + '/>')
      .css({
        marginTop: -24,
        backgroundColor: isError ? '#ffbbbb' : '#b2ebf2'
      })
      .html(message)
      .prependTo($('.console', container))
      .animate({ marginTop: 0 }, 300)
      .animate({ backgroundColor: isError ? '#ffdddd' : '#ffffff' }, 800);
    } else {
      count++;

      if (counter.length) {
        counter.html(count);
      } else {
        lastContainer.html(lastMessage)
        .append('<span class=\'count\'>' + count + '</span>');
      }
    }
  }

  error(message) {
    this.log(message, true);
  }

  overrideStyles() {
    jQuery.each(['backgroundColor', 'borderBottomColor', 'borderLeftColor', 'borderRightColor', 'borderTopColor', 'color', 'outlineColor'], function(i, attr) {
      jQuery.fx.step[attr] = function(fx) {
        if (!fx.state || typeof fx.end === typeof '') {
          fx.start = getColor(fx.elem, attr);
          fx.end = getRGB(fx.end);
        }

        fx.elem.style[attr] = ['rgb(', [
          Math.max(Math.min(parseInt((fx.pos * (fx.end[0] - fx.start[0])) + fx.start[0], 10), 255), 0),
          Math.max(Math.min(parseInt((fx.pos * (fx.end[1] - fx.start[1])) + fx.start[1], 10), 255), 0),
          Math.max(Math.min(parseInt((fx.pos * (fx.end[2] - fx.start[2])) + fx.start[2], 10), 255), 0)
        ].join(','), ')'].join('');
      };
    });
  }
}


// Color Conversion functions from highlightFade
// By Blair Mitchelmore
// http://jquery.offput.ca/highlightFade/

// Parse strings looking for color tuples [255,255,255]
function getRGB(color) {
  let result;

  // Check if we're already dealing with an array of colors
  if (color && color.constructor === Array && color.length === 3) {
    return color;
  }

  // Look for rgb(num,num,num)
  result = /rgb\(\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*,\s*([0-9]{1,3})\s*\)/.exec(color);
  if (result) {
    return [parseInt(result[1], 10), parseInt(result[2], 10), parseInt(result[3], 10)];
  }

  // Look for #a0b1c2
  result = /#([a-fA-F0-9]{2})([a-fA-F0-9]{2})([a-fA-F0-9]{2})/.exec(color);
  if (result) {
    return [parseInt(result[1], 16), parseInt(result[2], 16), parseInt(result[3], 16)];
  }

  // Otherwise, we're most likely dealing with a named color
  return jQuery.trim(color).toLowerCase();
}

function getColor(elem, attr) {
  let color;

  do {
    color = jQuery.css(elem, attr);

    // Keep going until we find an element that has color, or we hit the body
    if (color && color !== 'transparent' || jQuery.nodeName(elem, 'body')) {
      break;
    }

    attr = 'backgroundColor';

    elem = elem.parentNode;
  } while (elem);

  return getRGB(color);
}

main.js

export function configure(aurelia) {
  aurelia.use
    .standardConfiguration()
    .developmentLogging()
    .plugin('aurelia-kendoui-bridge');

  aurelia.start().then(a => a.setRoot());
}