source: main/trunk/ibisph-view/src/main/webapp/xslt/html/VideoDialog.xslt @ 19983

<?xml version="1.0" encoding="ISO-8859-1"?>

<xsl:stylesheet version="3.0" 
        xmlns:xsl ="http://www.w3.org/1999/XSL/Transform" 
        xmlns:ibis="http://www.ibisph.org"

        exclude-result-prefixes="ibis"
>

        <ibis:doc>
                <name>html/VideoDialog</name>
                <summary>
                </summary>
                <description>
                </description>
        </ibis:doc>


        <xsl:template name="Page.videoDialog">
                <dialog id="videoDialog" class="DialogContent">
                        <div class="InnerCanvas"><div id="mediaPlayer"></div></div>
                        <button type="button" title="Closes map selection without updating selections."
                                onclick="closeVideo()" 
                        >Close</button>
                </dialog>

                <script type="text/javascript">
                        // <![CDATA[
                        window.videoDialog = null;
                        window.videoPlayer = null;
                        $(document).ready(function()
                        {
                                window.videoDialog = $("#videoDialog").kendoWindow(
                                        {
                                                "title": "Learn More Video"
                                                ,"visible": false
                                                ,"width": "75%"
                                                ,"resizable": true
                                                ,"modal": true
                                                ,close: function(e) { window.videoPlayer.stop(); }
                                        }
                                ).data("kendoWindow");
                        });

                        // https://demos.telerik.com/kendo-ui/mediaplayer/playlist
                        // https://docs.telerik.com/kendo-ui/api/javascript/ui/mediaplayer?_ga=2.5892464.272183754.1572845261-1689576755.1572632213
                        function showVideo(videoURL, videoTitle)
                        {
                                if(null == window.videoPlayer)
                                {
                                        window.videoPlayer = $("#mediaPlayer").kendoMediaPlayer(
                                                {
                                                        "autoPlay": false
                                                        ,"navigatable": true
                                                }
                                        ).data("kendoMediaPlayer");
                                }
                                if(0 != videoURL.indexOf('http://')) videoURL = window.baseRequestPath + videoURL;
                                var mediaOptions = 
                                        {
                                                "source": videoURL
                                        };
                window.videoPlayer.media(mediaOptions);

                                window.videoDialog.title(videoTitle);
                                window.videoDialog.center().open();

                                window.videoPlayer.play();
                        }

                        function closeVideo()
                        {
                                window.videoDialog.close();
                        }
                        // <![CDATA[
                        // ]]>
                </script>

        </xsl:template>

</xsl:stylesheet>
<!-- ============================= End of File ============================= -->