<?xml version="1.0" encoding="UTF-8"?>
<component name="VideoPlayer" extends="BaseGroup">

    <interface>
        <field id="content" type="node" alias="video.content" />
        <field id="contentIsPlaylist" type="bool" alias="video.contentIsPlaylist" />
        <field id="contentIndex" type="string" alias="video.contentIndex" />
        <field id="nextContentIndex" type="string" alias="video.nextContentIndex" />
        <field id="control" type="string" alias="video.control" />
        <field id="seek" type="string" alias="video.seek" />
		<field id="closeVideo" type="bool" />
    </interface>

    <script type="text/brightscript" uri="Player.brs"/>

    <children>
        <!-- video node wrapper -->
        <!-- NOTE: should be first child to not overlay other UI components -->
        <RenderlessVideo id="video" width="1280" height="720"/>

        <!-- Buffering facade -->
        <Group id="loadingGroup">
            <LoadingProgressBar
			    id = "LoadingBar"
                backgroundColor="#FFFFFF"
                progressColor="#FF0000"
                height="4"
                width="250"
                translation="[515, 400]" />
        </Group>

        <!-- UI of the player -->
        <Group id="transportControls" translation="[200,1280]">
            <Poster id="controlsGradient" uri="pkg:/images/player/bottom_gradient.png"/>
            <LayoutGroup horizAlignment="center" translation="[960,-340]">
                <Poster id="action" width="[155]" height="[60]"/>
            </LayoutGroup>
			<Poster id="stateIcon" width="20" height="20" uri="pkg:/images/player/pause.png" translation="[140,0]"/>
		    <Label id="title" width="700" wrap="false" text="Your Cool Video Title" font="font:MediumBoldSystemFont" color="#ffffff" translation="[140,-50]"/>
            <Label id="leftProgressLabel" text="00:00" horizAlign="center" height="10" translation="[180,-10]"/>
			<PlaybackDurationBar id="progressBar" backgroundColor="#FFFFFFDD" progressColor="#FF0000" height="10" width="1270" translation="[180,10]"/>
            <Label id="rightProgressLabel" text="00:00" horizAlign="center" height="10" translation="[1580,-10]"/>
            <Poster id="progressModeBackground" translation="[690, -80]" width="92" height="60"
            uri="pkg:/images/TrickPlay_ButtonBackground_HD.png" opacity="0.8">
                <Poster id="progressMode" translation="[15,12]" width="60" height="36" opacity="1.0"/>
            </Poster>
        </Group>

        <!-- timer to hide ui after user idle -->
        <Timer
            id="transportControlsTimer"
            repeat="false"
            duration="5"
        />

        <!-- trasnport controls animation -->
        <ParallelAnimation
            id="showTCAnimation" 
            repeat="false"
        >
            <Animation
                id="transportControlsAnimation"
                duration="0.6"
                repeat="false"
                optional="true"
                easefunction="linear">
                <Vector2DFieldInterpolator
                    id="transportControlsInterpolator"
                    key="[0.0, 1.0]"
                    fieldToInterp="transportControls.translation"
                />
            </Animation>
            <Animation
                id="gradientAnimation"
                duration="0.4"
                repeat="false"
                easeFunction="linear">
                <FloatFieldInterpolator
                    id="gradientInterpolator"
                    key="[0.0, 1.0]"
                    fieldToInterp="transportControls.opacity"
                />
            </Animation>
        </ParallelAnimation>
    </children>
</component>
