<brls:Box
        width="100%"
        height="100%"
        axis="column"
        justifyContent="spaceBetween"
        alignItems="center">

    <brls:Box
            id="video/osd/top/box"
            width="100%"
            height="80"
            backgroundStartColor="#000000CC"
            backgroundEndColor="#00000000"
            background="vertical_linear">
        <brls:Label
                id="video/osd/title"
                height="100%"
                marginLeft="20"
                marginRight="120"
                singleLine="true"
                textColor="#FFFFFF"/>
        <brls:Box
                wireframe="false"
                positionBottom="0"
                positionLeft="20"
                positionType="absolute"
                alignItems="center">
            <SVGImage
                    width="16"
                    height="16"
                    SVG="@res/svg/widget-people.svg"/>
            <brls:Label
                    marginLeft="8"
                    textColor="#FFFFFF"
                    id="video/view/label/people"
                    fontSize="13"
                    text="N人正在看"/>
        </brls:Box>
        <brls:Box
                wireframe="false"
                id="video/osd/cast"
                hideClickAnimation="true"
                positionType="absolute"
                positionRight="60"
                positionTop="10"
                alignItems="center"
                justifyContent="center"
                height="60"
                width="60">
            <SVGImage
                    id="video/osd/cast/icon"
                    focusable="true"
                    focusUp="video/osd/cast/icon"
                    focusLeft="video/osd/cast/icon"
                    focusRight="video/osd/setting/icon"
                    focusDown="video/osd/lock/box"
                    hideHighlightBackground="true"
                    highlightCornerRadius="30"
                    height="30"
                    width="30"
                    SVG="@res/svg/bpx-svg-sprite-cast.svg"/>
        </brls:Box>
        <brls:Box
                wireframe="false"
                id="video/osd/setting"
                hideClickAnimation="true"
                positionType="absolute"
                positionRight="10"
                positionTop="10"
                alignItems="center"
                justifyContent="center"
                height="60"
                width="60">
            <SVGImage
                    id="video/osd/setting/icon"
                    focusable="true"
                    focusUp="video/osd/setting/icon"
                    focusLeft="video/osd/cast/icon"
                    focusRight="video/osd/setting/icon"
                    focusDown="video/osd/lock/box"
                    hideHighlightBackground="true"
                    highlightCornerRadius="30"
                    height="30"
                    width="30"
                    SVG="@res/svg/bpx-svg-sprite-setting.svg"/>
        </brls:Box>
        <brls:Box
                id="video/speed/hint/box"
                width="100%"
                positionBottom="-10"
                visibility="gone"
                positionType="absolute"
                justifyContent="center"
                alignItems="center">
            <brls:Box
                    backgroundColor="#00000080"
                    cornerRadius="4"
                    justifyContent="center"
                    alignItems="center">
                <brls:Label
                        marginLeft="64"
                        marginRight="8"
                        marginTop="6"
                        marginBottom="6"
                        textColor="#FFFFFF"
                        id="video/speed/hint/label"/>
            </brls:Box>
        </brls:Box>
    </brls:Box>

    <brls:Box
            axis="column"
            alignItems="center"
            justifyContent="center"
            visibility="gone"
            cornerRadius="4"
            width="100"
            height="100"
            backgroundColor="#303030A0"
            id="video/osd/center/box2">
        <SVGImage
                id="video/osd/center/icon2"
                height="30"
                width="30"
                marginBottom="20"/>
        <brls:Label
                id="video/osd/center/label2"
                textColor="#FFFFFF"
                fontSize="24"
                height="16"
                horizontalAlign="center"
                verticalAlign="center"/>
    </brls:Box>

    <brls:Box
            axis="column"
            alignItems="center"
            id="video/osd/center/box">
        <brls:ProgressSpinner
                id="video/osd/loading"
                width="100"
                height="100"/>
        <brls:Label
                id="video/osd/center/label"
                visibility="invisible"
                cornerRadius="4"
                backgroundColor="#303030A0"
                textColor="#FFFFFF"
                fontSize="16"
                height="16"
                horizontalAlign="center"
                verticalAlign="center"/>
    </brls:Box>

    <brls:Box
            id="video/osd/bottom/box"
            width="100%"
            height="120"
            alignItems="center"
            axis="row"
            background="vertical_linear">
        <brls:Box
                id="video/osd/toggle"
                wireframe="false"
                focusable="true"
                focusUp="video/osd/setting/icon"
                focusLeft="video/osd/toggle"
                focusRight="video/osd/icon/box"
                hideHighlightBackground="true"
                highlightCornerRadius="100"
                hideClickAnimation="true"
                alignItems="center"
                justifyContent="center"
                marginLeft="20"
                marginBottom="20"
                height="100"
                width="100">
            <SVGImage
                    id="video/osd/toggle/icon"
                    wireframe="false"
                    height="100"
                    width="100"
                    SVG="@res/svg/bpx-svg-sprite-play.svg"/>
        </brls:Box>
        <brls:Box
                width="auto"
                grow="1"
                height="130"
                axis="column">
            <VideoProgressSlider
                    focusable="false"
                    id="video/osd/bottom/progress"
                    focusUp="video/osd/lock/box"
                    focusRight="video/osd/bottom/progress"
                    width="100%"
                    height="50"
                    marginTop="10"
                    grow="1"/>
            <brls:Box
                    width="100%"
                    height="80"
                    alignItems="center"
                    grow="1">
                <brls:Label
                        wireframe="false"
                        horizontalAlign="right"
                        id="video/left/status"
                        height="100%"
                        width="100"
                        textColor="#FFFFFF"
                        text="00:00"/>
                <brls:Label
                        id="video/center/status"
                        horizontalAlign="center"
                        height="100%"
                        textColor="#FFFFFF"
                        text="/"/>
                <brls:Label
                        wireframe="false"
                        horizontalAlign="left"
                        id="video/right/status"
                        height="100%"
                        width="100"
                        textColor="#FFFFFF"
                        text="00:00"/>
                <brls:Box
                        id="video/osd/icon/box"
                        positionType="absolute"
                        positionRight="20">
                    <brls:Box
                            id="video/osd/danmaku/box/volume"
                            hideClickAnimation="true"
                            alignItems="center"
                            justifyContent="center"
                            height="60"
                            width="60">
                        <SVGImage
                                id="video/osd/danmaku/volume/icon"
                                focusable="true"
                                focusUp="video/osd/lock/box"
                                focusDown="video/osd/danmaku/volume/icon"
                                hideHighlightBackground="true"
                                highlightCornerRadius="30"
                                wireframe="false"
                                height="30"
                                width="30"
                                SVG="@res/svg/bpx-svg-sprite-volume.svg"/>
                    </brls:Box>
                    <brls:Box
                            id="video/osd/danmaku/box/setting"
                            hideClickAnimation="true"
                            alignItems="center"
                            justifyContent="center"
                            height="60"
                            width="60">
                        <SVGImage
                                id="video/osd/danmaku/setting/icon"
                                focusable="true"
                                focusUp="video/osd/lock/box"
                                focusDown="video/osd/danmaku/setting/icon"
                                hideHighlightBackground="true"
                                highlightCornerRadius="30"
                                wireframe="false"
                                height="30"
                                width="30"
                                SVG="@res/svg/bpx-svg-sprite-danmu-setting.svg"/>
                    </brls:Box>
                    <brls:Box
                            id="video/osd/danmaku/box/toggle"
                            hideClickAnimation="true"
                            alignItems="center"
                            justifyContent="center"
                            height="60"
                            width="60">
                        <SVGImage
                                id="video/osd/danmaku/icon"
                                focusable="true"
                                focusUp="video/osd/lock/box"
                                focusDown="video/osd/danmaku/icon"
                                hideHighlightBackground="true"
                                highlightCornerRadius="30"
                                wireframe="false"
                                height="30"
                                width="30"
                                SVG="@res/svg/bpx-svg-sprite-danmu-switch-on.svg"/>
                    </brls:Box>
                    <brls:Box
                            hideClickAnimation="true"
                            marginLeft="10"
                            marginRight="10"
                            alignItems="center"
                            justifyContent="center"
                            height="60">
                        <brls:Label
                                id="video/quality"
                                textColor="#FFFFFF"
                                focusable="true"
                                focusUp="video/osd/lock/box"
                                focusDown="video/quality"
                                horizontalAlign="center"
                                hideHighlightBackground="true"
                                highlightCornerRadius="8"/>
                    </brls:Box>
                    <brls:Box
                            hideClickAnimation="true"
                            marginLeft="10"
                            marginRight="10"
                            alignItems="center"
                            justifyContent="center"
                            height="60">
                        <brls:Label
                                id="video/speed"
                                textColor="#FFFFFF"
                                focusable="true"
                                focusUp="video/osd/lock/box"
                                focusDown="video/speed"
                                horizontalAlign="center"
                                text="@i18n/wiliwili/player/speed"
                                hideHighlightBackground="true"
                                highlightCornerRadius="8"/>
                    </brls:Box>
                    <brls:Box
                            hideClickAnimation="true"
                            marginLeft="10"
                            marginRight="10"
                            visibility="gone"
                            alignItems="center"
                            justifyContent="center"
                            height="60">
                        <brls:Label
                                id="show/episode"
                                textColor="#FFFFFF"
                                focusable="true"
                                focusUp="video/osd/lock/box"
                                focusDown="show/episode"
                                horizontalAlign="center"
                                visibility="gone"
                                text="@i18n/wiliwili/player/p"
                                hideHighlightBackground="true"
                                highlightCornerRadius="8" />
                    </brls:Box>
                    <brls:Box
                            id="video/osd/fullscreen"
                            hideClickAnimation="true"
                            alignItems="center"
                            justifyContent="center"
                            height="60"
                            width="60">
                        <SVGImage
                                id="video/osd/fullscreen/icon"
                                wireframe="false"
                                focusable="true"
                                focusUp="video/osd/lock/box"
                                focusDown="video/osd/fullscreen/icon"
                                focusRight="video/osd/fullscreen/icon"
                                hideHighlightBackground="true"
                                highlightCornerRadius="30"
                                height="30"
                                width="30"
                                SVG="@res/svg/bpx-svg-sprite-fullscreen.svg"/>
                    </brls:Box>
                </brls:Box>
            </brls:Box>
            <brls:Box
                    cornerRadius="4"
                    backgroundColor="@theme/brls/backdrop"
                    detachedX="30"
                    detachedY="-20"
                    visibility="gone"
                    height="32"
                    id="video/osd/hint/box">
                <brls:Label
                        id="video/osd/hint/label"
                        marginLeft="10"
                        marginRight="10"
                        marginTop="4"
                        marginBottom="4"
                        maxWidth="600"
                        textColor="#FFFFFF"/>
            </brls:Box>
        </brls:Box>
    </brls:Box>

    <VideoProfile
            id="video/profile"
            positionTop="12"
            positionLeft="12"
            positionType="absolute"
            visibility="invisible"/>

    <brls:Box
            width="50"
            height="50"
            alignItems="center"
            hideHighlightBackground="true"
            highlightCornerRadius="10"
            backgroundColor="#303030A0"
            focusable="true"
            focusUp="video/osd/setting/icon"
            focusDown="video/osd/icon/box"
            focusRight="video/osd/lock/box"
            focusLeft="video/osd/lock/box"
            cornerRadius="8"
            positionTop="45%"
            positionRight="20"
            positionType="absolute"
            id="video/osd/lock/box">
        <SVGImage
                id="video/osd/lock/icon"
                detachedX="13"
                detachedY="13"
                height="24"
                width="24"
                SVG="@res/svg/player-unlock.svg"/>
    </brls:Box>

</brls:Box>