Thursday 30 January 2014

Displaying Videos in Player when clicking on Folder using Ecma Script Client Object Model

ExecuteOrDelayUntilScriptLoaded(retrievevideoLinks, "sp.js");

function OpenVideoDialog()
        {
      
        var URL="https://mcf1.sharepoint.com/sites/roost/BizOps/Marketing/MCFProjectProfiles/_layouts/15/start.aspx#/Lists/Video%20Links/NewForm.aspx";
       //alert(URL);
        //var URL = "https://mcf1.sharepoint.com/sites/roost/BizOps/Marketing/MCFProjectProfiles/Shared%20Documents/Forms/upload.aspx?RootFolder =/sites/roost/BizOps/Marketing/MCFProjectProfiles/Shared%20Documents&Type=1&IsDlg=1";
        var strwidth = 600;
        var strheight = 400;

      
             
            var options =
            {
                url: URL,
                width: strwidth,
                height: strheight,
                dialogReturnValueCallback: DialogCallback
            };

            SP.UI.ModalDialog.showModalDialog(options);
        }

        function DialogCallback(dialogResult, returnValue)
        {
        alert("Hi");
           
             window.location="https://mcf1.sharepoint.com/sites/roost/BizOps/client%20solutions/SitePages/Test.aspx";

        }



function OpenEditDialogWindow()
        {
      
       
      
        //var URL = "https://mcf1.sharepoint.com/sites/roost/BizOps/Marketing/MCFProjectProfiles/_layouts/15/start.aspx#/Lists/Video%20Links/NewForm.aspx";
        var URL ="http://www.google.com";
        var strwidth = 600;
        var strheight = 400;

      
             
            var options =
            {
                url: URL,
                width: strwidth,
                height: strheight,
               // dialogReturnValueCallback: DialogCallback
            };

            SP.UI.ModalDialog.showModalDialog(options);
           
        }

        function DialogCallback(dialogResult, returnValue)
        {
           
             window.location="https://mcf1.sharepoint.com/sites/roost/BizOps/client%20solutions/SitePages/Test.aspx";

        }


function OpenEditDialog(Value)
        {
      
       
      
        var URL = "https://mcf1.sharepoint.com/sites/roost/BizOps/Marketing/MCFProjectProfiles/SitePages/PopupVideo.aspx?value="+Value+"";
      
        var strwidth = 480;
        var strheight = 420;

      
             
            var options =
            {
                url: URL,
                width: strwidth,
                height: strheight,
                //dialogReturnValueCallback: DialogCallback
            };

            SP.UI.ModalDialog.showModalDialog(options);
           
            $( '.ms-dlgContent' ).each(function () {
            this.style.setProperty( 'width', '0px', 'important' );
            this.style.setProperty( 'height', '0px', 'important' );

            });
           
            $( '.ms-dlgCloseBtn > span' ).each(function () {
            this.style.setProperty( 'width', '31px', 'important' );
            this.style.setProperty( 'border', '0px', 'important' );
            this.style.setProperty( 'padding-top', '28px', 'important' );
            this.style.setProperty( 'padding-right', '0px', 'important' );
            this.style.setProperty( 'padding-bottom', '0px', 'important' );
            this.style.setProperty( 'padding-left', '0px', 'important' );

            });

           
            $(document).ready(function(){
            $('#dialogTitleSpan').hide();
            });

        }

        function DialogCallback(dialogResult, returnValue)
        {
           
             window.location="https://mcf1.sharepoint.com/sites/roost/BizOps/Recruiting/SitePages/RecruitingDocuments.aspx";

        }

function DialogCallback(dialogResult, returnValue) { }


//Method to retrieve the list items filtered by logged in user
var videoclientContext ='';
var videooList ='';
var videoURL ='';

function retrievevideoLinks() {

    //Load site
    videoclientContext = new SP.ClientContext.get_current();  

    videooList = videoclientContext.get_web().get_lists().getByTitle('Video Links');

    var videocamlQuery = new SP.CamlQuery();
       
    //Below query is to retrieve all items
    videocamlQuery.set_viewXml('<View><Query><OrderBy> <FieldRef Name="Modified" Ascending="False" /></OrderBy><Where><Geq><FieldRef Name=\'ID\'/>' +
        '<Value Type=\'Number\'>1</Value></Geq></Where></Query><RowLimit>100</RowLimit></View>');
   
    this.videocollListItem = videooList.getItems(videocamlQuery);

    videoclientContext.load(videocollListItem, 'Include(ID, URL)');

    videoclientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));              
}

function onQuerySucceeded(sender, args) {

    var VideoHtml ="";
    var URL = "";
    //var listURL = listDocRoot.get_serverRelativeUrl();
    //alert(listURL);
    VideoHtml = VideoHtml + "<table id='videoLinks' style='width:100%'>"; 
    VideoHtml = VideoHtml + "<thead><tr><th>Video Links</th></tr></thead><tbody>";
    var videolistItemInfo = '';
    var videolistItemEnumerator = videocollListItem.getEnumerator();
       
    while (videolistItemEnumerator.moveNext()) {
       
        //current item
        var videooListItem = videolistItemEnumerator.get_current();
       
        //get all column values
        //var title = oListItem.get_item('URL').get_description();
       
        VideoURL = videooListItem.get_item('URL');
        if(VideoURL !=null)
        {
              var linkURL = VideoURL.get_url();
              var title = VideoURL.get_description();

              var ext = linkURL.substr(linkURL.lastIndexOf('.') + 1);
              //alert(ext);
              if(ext == "mp4")
              {
              URL = linkURL;
              }
              else
              {
              var result = linkURL.split('/');
              URL = result[3];
           
              if(URL.indexOf("watch") != -1)  
              {
   
              var res = URL.split('=');
              URL = res[1];
   
              }
             
            }
         
             
        }
           else
           {
          
           URL = null;
           linkURL = null;
           }
          
        VideoHtml = VideoHtml + "<tr>";
        VideoHtml = VideoHtml + "<td><a style='cursor:pointer' onclick=javascript:OpenEditDialog('"+URL+"')>" + title +"</a></td>";
       //DocHtml = DocHtml + "<td><div id='light1' class='wcontent'><div style='width:100%; height:0px; position:relative;'>&nbsp;<div class='closebutton'><a href = 'javascript:void(0)' onClick='Close1Window()'><img src='../SiteAssets/images/close.jpg' width='32' height='31' alt=''></a></div></div><iframe width='440' height='350' src='//www.youtube.com/embed/"+URL+"?feature=player_embedded&autoplay=1' frameborder='0' allowfullscreen></iframe></div><a href='#' onclick=javascript:Open1Window()>"+linkURL+"</a><div id='fade' class='black_overlay'></div></td>";
        //DocHtml = DocHtml + "<td><a href='#' onclick=javascript:pop('pop1')>"+linkURL+"</a><div id='pop1' class='parentDisable'><table border='1' id='popup'><tr><td><iframe width='440' height='320' src='//www.youtube.com/embed/"+URL+"?feature=player_embedded&autoplay=1' frameborder='0' allowfullscreen></iframe></td></tr><tr><td><a href='#' onclick=hide('pop1')>Close</a></td></tr></table></div></td>";
        //      DocHtml = DocHtml + "<td><div id='dialog-modal'  style='display:none'><iframe width='440' height='320' src='//www.youtube.com/embed/"+URL+"?feature=player_embedded&autoplay=1' frameborder='0' allowfullscreen></iframe></div><a onclick='javascript:ShowPopUp()'>" + linkURL +"</a></td>";
              VideoHtml = VideoHtml + "</tr>";
        //checking if it should open in Sharepoint dialog or new tab   
                
            
          
    }

   VideoHtml = VideoHtml + "</tbody></table><div id='videoLinksPager'>";
   
   
    //assign html to div
    document.getElementById("vtabs-1").innerHTML = VideoHtml;
    //var createFolderURL=  listURL + "/Forms/Upload.aspx?RootFolder=" + hdnDocumentURL + "&Type=1&IsDlg=1";  

    //JQGrid here
    tableToGrid('#videoLinks',
    {
     width:470,
     height:'auto',
     ignoreCase:true,
     pager: '#videoLinksPager',
     altRows: true,
     altclass:'myAltRowClass',
     rowNum: 8,
     viewrecords: true,
     //autowidth:true,
     caption: "<table cellspacing='0' cellpadding='0' width='100%'><tr><td style='width:72%;'></td><td style='width:28%;padding-top:3px;'><a href='https://mcf1.sharepoint.com/sites/roost/BizOps/Marketing/MCFProjectProfiles/_layouts/15/start.aspx#/Lists/Video%20Links/NewForm.aspx' style='margin-left:10px;'><img title='new item' src='https://mcf1.sharepoint.com/sites/roost/siteAssets/images/plus.png' class='addNewImg' style='cursor:pointer;margin-left:10px;margin-right:10px;height:10px;width:10px;text-decoration:none' / ><span style='padding-top:10px'></a><a class='AddNew' href='https://mcf1.sharepoint.com/sites/roost/BizOps/Marketing/MCFProjectProfiles/_layouts/15/start.aspx#/Lists/Video%20Links/AllItems.aspx' target='_blank' style='cursor:pointer;margin-right:10px;text-decoration:none;'><span class='AddNew'>View All</span></a></td></tr></table>",
     /*,
     loadComplete: function (rowid) { //Hide grid header
              var grid = $("#appLinksTools");
              var gview = grid.parents("div.ui-jqgrid-view");
              gview.children("div.ui-jqgrid-hdiv").hide();
          }*/
    });
   
    //$("appLinksSysPager_right").css("width", 198);
    $("#videoLinksPager").css("width", 474);

    //Search Filter enable with properties
    //$("#videoLinks").jqGrid('filterToolbar',{stringResult: true, searchOnEnter: false, defaultSearch: 'cn'});
   
    //Column properties
    $('#videoLinks').jqGrid('setColProp', 'Tools', { sortable: true, search:true, searchoptions:{searchhidden:true} });
   
    //For paging
    $("#videoLinks").jqGrid('setGridParam', {page: 1}).trigger("reloadGrid");
     
   

    }

function onQueryFailed(sender, args) {

    alert('Request failed. ' + args.get_message() + '\n' + args.get_stackTrace());
}

Posted by at

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)