gist-master/app.html

## app.html
<template>
  <require from="aurelia-kendoui-bridge/mediaplayer/mediaplayer"></require>
  <require from="aurelia-kendoui-bridge/listview/listview"></require>
  <require from="aurelia-kendoui-bridge/common/template"></require>

  <div id="mediaPlayer" style="height:360px" ak-mediaplayer="k-autoPlay.bind: true; k-widget.bind: mediaPlayer">
  </div>
  <div class="k-list-container playlist">
    <ul id="listView" class="k-list"></ul>
    <ak-list-view k-data-source.bind="videos"
                  k-selectable="true"
                  k-scrollable="true"
                  k-widget.bind="listView"
                  k-on-data-bound.delegate="onDataBound($event.detail)"
                  k-on-change.delegate="onChange()">
      <ak-template>
        <li class="k-item k-state-default">
          <span>
            <img src=${poster}>
            <h5>${title}</h5>
          </span>
        </li>
      </ak-template>
    </ak-list-view>
  </div>
</template>

## app.js
export class Playlist {
  constructor() {
    this.videos = new kendo.data.DataSource({
      data: [{
        title: "Telerik Platform - Enterprise Mobility. Unshackled.",
        poster: "http://img.youtube.com/vi/N3P6MyvL-t4/1.jpg",
        source: "https://www.youtube.com/watch?v=N3P6MyvL-t4"
      }, {
        title: "Learn How York Solved Its Database Problem",
        poster: "http://img.youtube.com/vi/_S63eCewxRg/1.jpg",
        source: "https://www.youtube.com/watch?v=_S63eCewxRg"
      }, {
        title: "Responsive Website Delivers for Reeves Import Motorcars",
        poster: "http://img.youtube.com/vi/DYsiJRmIQZw/1.jpg",
        source: "https://www.youtube.com/watch?v=DYsiJRmIQZw"
      }, {
        title: "Digital Transformation: A New Way of Thinking",
        poster: "http://img.youtube.com/vi/gNlya720gbk/1.jpg",
        source: "https://www.youtube.com/watch?v=gNlya720gbk"
      }, {
        title: "Take a Tour of the Telerik Platform",
        poster: "http://img.youtube.com/vi/rLtTuFbuf1c/1.jpg",
        source: "https://www.youtube.com/watch?v=rLtTuFbuf1c"
      }, {
        title: "Why Telerik Analytics - Key Benefits For Your Applications",
        poster: "https://i.ytimg.com/vi/CpHKm2NruYc/1.jpg",
        source: "https://www.youtube.com/watch?v=CpHKm2NruYc"
      }]
    });
  }

  onChange() {
    let index = this.listView.select().index();
    let data = this.videos.view()[index];

    this.mediaPlayer.media(data);
  }

  onDataBound() {
    var listView = e.sender;

    listView.select(listView.element.children().first());
  }
}

## 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>

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

  aurelia.start().then(a => a.setRoot());
}
	<template>
	<require from="aurelia-kendoui-bridge/mediaplayer/mediaplayer"></require>
	<require from="aurelia-kendoui-bridge/listview/listview"></require>
	<require from="aurelia-kendoui-bridge/common/template"></require>

	<div id="mediaPlayer" style="height:360px" ak-mediaplayer="k-autoPlay.bind: true; k-widget.bind: mediaPlayer">
	</div>
	<div class="k-list-container playlist">
	<ul id="listView" class="k-list"></ul>
	<ak-list-view k-data-source.bind="videos"
	k-selectable="true"
	k-scrollable="true"
	k-widget.bind="listView"
	k-on-data-bound.delegate="onDataBound($event.detail)"
	k-on-change.delegate="onChange()">
	<ak-template>
	<li class="k-item k-state-default">
	<span>
	<img src=${poster}>
	<h5>${title}</h5>
	</span>
	</li>
	</ak-template>
	</ak-list-view>
	</div>
	</template>
	export class Playlist {
	constructor() {
	this.videos = new kendo.data.DataSource({
	data: [{
	title: "Telerik Platform - Enterprise Mobility. Unshackled.",
	poster: "http://img.youtube.com/vi/N3P6MyvL-t4/1.jpg",
	source: "https://www.youtube.com/watch?v=N3P6MyvL-t4"
	}, {
	title: "Learn How York Solved Its Database Problem",
	poster: "http://img.youtube.com/vi/_S63eCewxRg/1.jpg",
	source: "https://www.youtube.com/watch?v=_S63eCewxRg"
	}, {
	title: "Responsive Website Delivers for Reeves Import Motorcars",
	poster: "http://img.youtube.com/vi/DYsiJRmIQZw/1.jpg",
	source: "https://www.youtube.com/watch?v=DYsiJRmIQZw"
	}, {
	title: "Digital Transformation: A New Way of Thinking",
	poster: "http://img.youtube.com/vi/gNlya720gbk/1.jpg",
	source: "https://www.youtube.com/watch?v=gNlya720gbk"
	}, {
	title: "Take a Tour of the Telerik Platform",
	poster: "http://img.youtube.com/vi/rLtTuFbuf1c/1.jpg",
	source: "https://www.youtube.com/watch?v=rLtTuFbuf1c"
	}, {
	title: "Why Telerik Analytics - Key Benefits For Your Applications",
	poster: "https://i.ytimg.com/vi/CpHKm2NruYc/1.jpg",
	source: "https://www.youtube.com/watch?v=CpHKm2NruYc"
	}]
	});
	}

	onChange() {
	let index = this.listView.select().index();
	let data = this.videos.view()[index];

	this.mediaPlayer.media(data);
	}

	onDataBound() {
	var listView = e.sender;

	listView.select(listView.element.children().first());
	}
	}
	<!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>
	export function configure(aurelia) {
	aurelia.use
	.standardConfiguration()
	.developmentLogging()
	.plugin('aurelia-kendoui-bridge');

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