<?xml version="1.0" encoding="UTF-8"?>
<!--********** Copyright 2020 Roku Corp.  All Rights Reserved. **********-->

<component name="GridScreen" extends="Group"  initialFocus="RowList">
    <script type="text/brightscript" uri="GridScreen.brs" />
	 <interface>
        <!-- Specifies the content for the Grid -->
        <field id="content" type="node" alias="RowList.content" />
        <field id="rowItemSelected" type="intarray" alwaysnotify="true" alias="RowList.rowItemSelected" />
        <field id="jumpToRowItem" type="intarray" alias="RowList.jumpToRowItem" />
        <field id="liveSelected" type="boolean" alwaysnotify="true" />
        <field id="categoryMenuNames" type="stringarray" alwaysnotify="true" />
        <field id="deepLinkRequest" type="assocarray" alwaysnotify="true" />
    </interface>
    <children>
	
	
	
	
	    <!-- Shaded overhang to display the focused content in the RowList -->
	
    <Rectangle
        id = "overhang"
        height = "195"
        width = "1920"
        color = "0x00000080" >
        <Overhang
            id="overhang2"
            showOptions="false"
            showClock="false"
            logoUri="pkg:/images/banner.png"
            height="75"
            translation="[0,5]"
        />

        <Label
	        id="descriptionLabel"
	        wrap="true"
	        width="1220"
	        numLines="2"
			translation="[350,105]"
	    />


        <!-- Category banner image — below the church logo -->
        <Poster
            id="categoryBanner"
            width="700"
            height="50"
            translation="[350, 138]"
            loadDisplayMode="scaleToFit"
            visible="false"
        />


        <!-- Watch Live button -->
        <Rectangle
            id="watchLiveBg"
            width="200"
            height="44"
            color="0xCC0000FF"
            translation="[1320,48]"
            blendingEnabled="true">
            <Label
                id="watchLiveLabel"
                text="WATCH LIVE"
                horizAlign="center"
                vertAlign="center"
                width="200"
                height="44"
                font="font:SmallBoldSystemFont"
                color="0xFFFFFFFF"
            />
        </Rectangle>

    </Rectangle>

        <!-- Instruction image from feed (absolute position over overhang) -->
        <Poster
            id="instructionImage"
            width="360"
            height="120"
            translation="[1540,10]"
            loadDisplayMode="scaleToFit"
            visible="false"
        />

	
	
        <RowList
            itemComponentName="RowListItemComponent"
            id="rowList"
            translation="[50,215]"
            numRows="4"
            rowitemSize="[[320,180]]"
            rowItemSpacing="[[20,0]]"
            itemSize="[1200,270]"
            rowLabelOffset="[[50,20]]"
            focusXOffset="[50]"
            showRowLabel="[true]"
            rowFocusAnimationStyle="floatingfocus"
        />

        <CategoryMenu
            id="categoryMenu"
            translation="[390, 155]"
            visible="false"
        />
    </children>
</component>
