<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.MediaPlayerExamples.MediaTypes.DefaultCS" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
<title>Telerik ASP.NET Example</title>
<link href="styles.css" rel="stylesheet" />
<script type="text/javascript" src="scripts.js"></script>
</head>
<body>
<form id="form1" runat="server">
<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
<telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
<telerik:RadScriptBlock runat="server" ID="RadCodeBlock1">
<script type="text/javascript">
Sys.Application.add_load(function ()
{
demo.listView1 = $find('<%= RadListView1.ClientID %>');
demo.listView2 = $find('<%= RadListView2.ClientID %>');
demo.initialize();
});
</script>
</telerik:RadScriptBlock>
<div class="demo-container size-custom">
<telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
<div class="mediaPlayerWrapper">
<div class="leftPanel">
<telerik:RadMediaPlayer RenderMode="Lightweight" ID="RadMediaPlayer1" Skin="Glow" runat="server" Width="700px" BackColor="Black"
StartVolume="80" Height="394px">
</telerik:RadMediaPlayer>
</div>
<div style="background-color: #10191E; border-left: 1px solid #364046;">
<telerik:RadTabStrip RenderMode="Lightweight" ID="RadTabStrip1" runat="server" Skin="Glow" MultiPageID="RadMultiPage1"
SelectedIndex="0" Width="246px" CssClass="tabStripMenu">
<Tabs>
<telerik:RadTab Text="Video" Value="Video" Selected="true" PageViewID="RadPageView1">
</telerik:RadTab>
<telerik:RadTab Text="Audio" Value="Audio" PageViewID="RadPageView2"></telerik:RadTab>
<telerik:RadTab Text="YouTube" Value="YouTube" PageViewID="RadPageView3"></telerik:RadTab>
</Tabs>
</telerik:RadTabStrip>
<telerik:RadMultiPage ID="RadMultiPage1" runat="server" SelectedIndex="0" Height="358px" BackColor="#10191E">
<telerik:RadPageView ID="RadPageView1" runat="server" Selected="true" Style="padding-top: 1px;">
<telerik:RadListView ID="RadListView1" runat="server" OnSelectedIndexChanged="RadListView1_SelectedIndexChanged" Skin="Glow" OnNeedDataSource="RadListView1_NeedDataSource">
<LayoutTemplate>
<div id="itemPlaceholder" runat="server">
</div>
</LayoutTemplate>
<ItemTemplate>
<a href="#" class="playlistItem" onclick='<%#"demo.selectVideo(this,"+Container.DisplayIndex+"); return false;"%>'>
<asp:Image ID="Image1" runat="server" AlternateText='<%# Eval("Title") %>' ImageUrl='<%# "images/" + Eval("Path") + ".png"%>' />
<asp:Label ID="Label1" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
</a>
</ItemTemplate>
<SelectedItemTemplate>
<span class="playlistItem selected">
<asp:Image ID="Image2" runat="server" AlternateText='<%# Eval("Title") %>' ImageUrl='<%# "images/" + Eval("Path") + ".png"%>' />
<asp:Label ID="Label2" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
<asp:Image ID="Image3" CssClass="playIcon" runat="server" ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/playIcon.png"
AlternateText="Selected" />
</span>
</SelectedItemTemplate>
</telerik:RadListView>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView2" runat="server" Style="padding-top: 1px;">
<telerik:RadListView ID="RadListView2" runat="server" Skin="Glow" OnSelectedIndexChanged="RadListView2_SelectedIndexChanged" OnNeedDataSource="RadListView2_NeedDataSource">
<LayoutTemplate>
<div id="itemPlaceholder" runat="server">
</div>
</LayoutTemplate>
<ItemTemplate>
<a href="#" class="playlistItem playlistAudioItem" onclick='<%#"demo.selectSong(this,"+Container.DisplayIndex+"); return false;"%>'>
<asp:Label ID="Label3" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
</a>
</ItemTemplate>
<SelectedItemTemplate>
<span class="playlistItem playlistAudioItem selected">
<asp:Image ID="Image4" CssClass="playIcon" runat="server" ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/playIcon.png"
AlternateText="Selected" />
<asp:Label ID="Label4" runat="server" Text='<%# Eval("Title") %>'></asp:Label>
</span>
</SelectedItemTemplate>
</telerik:RadListView>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageView3" runat="server">
<div style="padding: 16px 0 0 1px;">
<asp:Image ID="Image5" runat="server" AlternateText="YouTube"
ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/youtubeLogo.png" Width="75px" Height="32px" />
<br />
<br />
<div
style='color: #B4BEC3; font-family: Arial,Helvetica,sans-serif; font-size: 13px; margin-bottom: -11px;'>
Insert your YouTube URL
</div>
<br />
<telerik:RadTextBox RenderMode="Lightweight" ID="RadTextBox1" runat="server" Skin="Glow" Width="199px"
Height="28px" Text="https://www.youtube.com/watch?v=HMfp-Z5Vs-k">
</telerik:RadTextBox>
<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" Skin="Glow" Text="YouTube" BackColor="#2C363B" AutoPostBack="true" OnClick="RadButton1_Click"
Style="margin: 0 0 -11px 10px; background-repeat: no-repeat;" Width="30px" Height="28px">
<Image EnableImageButton="true" ImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/buttonNormal.png"
HoveredImageUrl="~/Media-Player/Examples/Functionality/MediaTypes/images/buttonHover.png" />
<Image EnableImageButton="true" />
</telerik:RadButton>
</div>
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>
</div>
</telerik:RadAjaxPanel>
</div>
</form>
</body>
</html>