Tuesday, May 8, 2012

Video rotator web part

<div>
  <div id="MediaPlayerHost"></div>
  <table  cellpadding="0" cellspacing="0" border="0" style="background-color:#D7D7D7; height:47px; width:362px">
    <tr>
      <td>
        <div id='videospacing' class="videospacing">
          <div id='items' class='items'></div>
        </div>
      </td>
    </tr>
    <tr>
      <td>
        <div class="videopagination">
          <nobr id="pag">1-3</nobr>
        </div>
        <div  class="videonextpre">
          <a id='prev' onclick='javascript:move_prev()' class="left" disabled=disabled></a>
          <a id='next' onclick='javascript:move_next()' class="right"></a>
        </div>
      </td>
    </tr>
  </table>
<script type="text/javascript" src="_layouts/mediaplayer.js"></script>
<script type="text/javascript">
    var idCount = 0, modified = 0, prev = 0, modifiedFirst = 0, idCountFirst = 0, counter = 0, itemCount = 0, pageCount = 4, click = null, count = 0, nextCount = 0; prevCount = 4;

    function move_next() {
        prev = 0;
        counter = 0;
        click = 'next';
        var curCounter = 0;

        jQuery("div[class='items']").find("a").each(function () {
            jQuery(this).remove();
        });


        retrieveListItems();
        document.getElementById('prev').disabled = false;
        document.getElementById('prev').style.cursor = "pointer";
        document.getElementById('prev').className = 'left';
        if (counter == 5) {
            document.getElementById('next').disabled = false;
            document.getElementById('next').style.cursor = "pointer";
            document.getElementById('next').className = 'right';
        }
        else {
            document.getElementById('next').disabled = true;
            document.getElementById('next').style.cursor = "text";
            document.getElementById('next').className = 'rightdim';
            // document.getElementById('next').Attributes.Add('onMouseOver', "this.style.cursor='text'");
        }
        setTimeout('displayPageCount()', 500);

        //            curCounter = jQuery("div[class='items']").find("a").length;
        //           
        //            pageCount = pageCount + curCounter;
        //            if (curCounter == 0) {
        //                document.getElementById("pag").innerHTML = pageCount + ' of ' + itemCount;
        //            }
        //            else {
        //                alert(curCounter);
        //                document.getElementById("pag").innerHTML = (pageCount - curCounter + 1) + '-' + pageCount + ' of ' + itemCount;
        //            }

    }

    function displayPageCount() {
        curCounter = jQuery("div[class='items']").find("a").length;

        pageCount = pageCount + curCounter;
        if (curCounter == 1) {
            nextCount = prevCount + 1;
            document.getElementById("pag").innerHTML = (prevCount + 1) + ' of ' + itemCount;
        }
        else {
            nextCount = prevCount + 1;
            document.getElementById("pag").innerHTML = (prevCount + 1) + '-' + (prevCount + curCounter) + ' of ' + itemCount;
        }
    }

    function displayPrevPageCount() {
        curCounter = jQuery("div[class='items']").find("a").length;
        // alert(curCounter);
        document.getElementById("pag").innerHTML = (nextCount - 4) + '-' + (nextCount - 1) + ' of ' + itemCount;
    }

    function move_prev() {
        prev = 1;
        counter = 0;
        click = 'prev';
        var curCounter = 0;
        jQuery("div[class='items']").find("a").each(function () {
            jQuery(this).remove();
        });
        retrieveListItems();
        document.getElementById('next').disabled = false;
        document.getElementById('next').style.cursor = "pointer";
        document.getElementById('next').className = 'right';

        // curCounter = jQuery("div[class='items']").find("a").length;
        pageCount = pageCount - curCounter;
        if ((nextCount - 4) == 1) {
            document.getElementById('prev').disabled = true;
            document.getElementById('prev').style.cursor = "text";
            document.getElementById('prev').className = 'leftdim';
        }
        else {
            document.getElementById('prev').disabled = false;
            document.getElementById('prev').style.cursor = "pointer";
            document.getElementById('prev').className = 'left';
        }
        prevCount = nextCount - 1;
        document.getElementById("pag").innerHTML = (nextCount - 4) + '-' + (nextCount - 1) + ' of ' + itemCount;
        // setTimeout('displayPrevPageCount()', 1000);
        //document.getElementById("pag").innerHTML = (pageCount - 3) + '-' + pageCount + ' of ' + itemCount;

    }

    function scroll() {
        $('.items').cycle({
            fx: 'cover',
            speed: 500,
            timeout: 2000
        });
    }

    function getMediaPlayer() {
        var p = document.getElementById("MediaPlayerHost")
        var obj = p.getElementsByTagName("object");
        return obj[0].Content.MediaPlayer;
    }

    function SetMediaSource(imgObj) {
        //alert(imgObj.id);
        jQuery("div[class='items']").find("img").each(function () {
            jQuery(this).attr("class", "photo");
        });
        var imagTga = document.getElementById(imgObj.id);
        if (imagTga != undefined) {
            document.getElementById(imgObj.id).setAttribute("class", "videoselected");
        }
        var p = getMediaPlayer();
        var clickArgs = imgObj.tag.split(";");
        p.MediaSource = clickArgs[0];
        p.PreviewImageSource = clickArgs[1];
        p.AutoPlay = true;
        p.Play();
    }

    function SetMediaSourceImage(imgObj) {
        var p = getMediaPlayer();
        var clickArgs = imgObj.tag.split(";");
        p.PreviewImageSource = clickArgs[1];
        p.AutoPlay = false;
    }


    function DisplayCount() {

        var clientContext = SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('Videos');
        var camlQuery = new SP.CamlQuery();
        camlQuery.set_viewXml('<View><RowLimit></RowLimit></View>');
        this.listItems = oList.getItems(camlQuery);
        clientContext.load(listItems);
        clientContext.executeQueryAsync(
                     Function.createDelegate(this, this.onListItemsLoadSuccess),
                     Function.createDelegate(this, this.onQueryFailed));
        retrieveListItems();
    }

    function onListItemsLoadSuccess(sender, args) {
        var listEnumerator = this.listItems.getEnumerator();
        while (listEnumerator.moveNext()) {
            itemCount++;
        }
        //alert(itemCount);
        document.getElementById("pag").innerHTML = (pageCount - 3) + '-' + pageCount + ' of ' + itemCount;
        if (itemCount == 4) {
            document.getElementById('next').disabled = true;
            document.getElementById('next').style.cursor = "text";
            document.getElementById('next').className = 'rightdim';
        }
        document.getElementById('prev').style.cursor = "text";
        document.getElementById('prev').className='leftdim';
    }

 

    function retrieveListItems() {

        var clientContext = SP.ClientContext.get_current();
        var oList = clientContext.get_web().get_lists().getByTitle('Videos');

        var camlQuery = new SP.CamlQuery();
        if (idCount == 0 && modified == 0) {
            camlQuery.set_viewXml('<View><Query><OrderBy><FieldRef Name="Modified" Ascending="False" /></OrderBy></Query><RowLimit>4</RowLimit></View>');
        }
        else {
            if (prev == 0) {
                var d = Date.parse(modified);
                var mon = new Date(d);
                // 2012-04-18T21:48:39Z
                var fDate = mon.getYear() + '-' + (mon.getMonth() + 1) + '-' + mon.getDate() + 'T' + mon.getHours() + ':' + mon.getMinutes() + ':' + mon.getSeconds() + 'Z';

                camlQuery.set_viewXml('<View><Query><Where><And><Leq><FieldRef Name="Modified" /> ' +
                                  '<Value IncludeTimeValue="TRUE" Type="DateTime">' + fDate + '</Value></Leq><Neq>' +
                                  '<FieldRef Name="ID" /><Value Type="Counter">' + idCount + '</Value></Neq></And></Where><OrderBy>' +
                                  '<FieldRef Name="Modified" Ascending="False" /></OrderBy></Query><RowLimit>5</RowLimit></View>');
            }
            else if (prev == 1) {
                var d = Date.parse(modifiedFirst);
                var mon = new Date(d);
                // 2012-04-18T21:48:39Z
                var fDate = mon.getYear() + '-' + (mon.getMonth() + 1) + '-' + mon.getDate() + 'T' + mon.getHours() + ':' + mon.getMinutes() + ':' + mon.getSeconds() + 'Z';

                camlQuery.set_viewXml('<View><Query><Where><And><Geq><FieldRef Name="Modified" /> ' +
                                  '<Value IncludeTimeValue="TRUE" Type="DateTime">' + fDate + '</Value></Geq><Neq>' +
                                  '<FieldRef Name="ID" /><Value Type="Counter">' + idCountFirst + '</Value></Neq></And></Where><OrderBy>' +
                                  '<FieldRef Name="Modified" Ascending="False" /></OrderBy></Query><RowLimit>5</RowLimit></View>');
            }
        }
        this.collListItem = oList.getItems(camlQuery);

        clientContext.load(collListItem, 'Include(Title, FileRef, ID,Modified,AlternateThumbnailUrl,_Comments)');

        clientContext.executeQueryAsync(Function.createDelegate(this, this.onQuerySucceeded), Function.createDelegate(this, this.onQueryFailed));

    }


     //SP.SOD.executeOrDelayUntilScriptLoaded(DisplayCount, 'SP.js');

    function onQuerySucceeded(sender, args) {

        var listItemEnumerator = collListItem.getEnumerator();

        while (listItemEnumerator.moveNext()) {

            var oListItem = listItemEnumerator.get_current();
            //alert(oListItem.get_item("AlternateThumbnailUrl").get_url());
            var previewImgUrl = null;
            var ImgTitle = null;
            var ImgDesc = null;
            if (oListItem.get_item("AlternateThumbnailUrl") != null) {
                previewImgUrl = oListItem.get_item("AlternateThumbnailUrl").get_url();
            }
            if (previewImgUrl == null) {
                previewImgUrl = "/_layouts/images/VideoPreview.png";
            }

            if (oListItem.get_item("Title") != null) {
                ImgTitle = oListItem.get_item("Title");
            }
            else {
                ImgTitle = "";
            }


            mediaPlayer.createMediaPlayer(
          document.getElementById('MediaPlayerHost'),
          'MediaPlayerHost',
          '362px', '179px',
          {
              displayMode: 'Inline',
              mediaTitle: '',
              mediaSource: oListItem.get_item('FileRef'),
              previewImageSource: previewImgUrl,
              autoPlay: false,
              loop: false,
              mediaFileExtensions: 'wmv;wma;avi;mpg;mp3;',
              silverlightMediaExtensions: 'wmv;wma;mp3;'
          });
            idCountFirst = oListItem.get_item("ID");
            modifiedFirst = oListItem.get_item("Modified");
            var imageID = 'image' + count;
            var imgHost = document.getElementById('items');
            var aTag = document.createElement('a');
            aTag.setAttribute('title', ImgTitle);
            var newimg = document.createElement('img');
            newimg.setAttribute('src', previewImgUrl);
            newimg.setAttribute('height', '44px');
            newimg.setAttribute('width', '78px');
            newimg.setAttribute('class', 'photo');
            newimg.setAttribute('id', imageID);
            newimg.setAttribute('tag', oListItem.get_item('FileRef') + ";" + previewImgUrl);
            newimg.setAttribute('onmouseover', "javascript:SetMediaSourceImage(this)");
            newimg.setAttribute('onclick', "javascript:SetMediaSource(this)");
            aTag.appendChild(newimg);
            imgHost.appendChild(aTag);
            count++;
            counter++;
            break;
        }

        while (listItemEnumerator.moveNext()) {
            var oListItem = listItemEnumerator.get_current();
            //var previewImgUrl = oListItem.get_item("AlternateThumbnailUrl");
            var previewImgUrl = null;
            var ImgTitle = null;
            var ImgDesc = null;
            if (oListItem.get_item("AlternateThumbnailUrl") != null) {
                previewImgUrl = oListItem.get_item("AlternateThumbnailUrl").get_url();
            }
            if (previewImgUrl == null) {
                previewImgUrl = "/_layouts/images/VideoPreview.png";
            }

            if (oListItem.get_item("Title") != null) {
                ImgTitle = oListItem.get_item("Title");
            }
            else {
                ImgTitle = "";
            }


            idCount = oListItem.get_item("ID");
            modified = oListItem.get_item("Modified");
            var imgHost = document.getElementById('items');
            var imageID = 'image' + count;
            var aTag = document.createElement('a');
            aTag.setAttribute('title', ImgTitle);
            var newimg = document.createElement('img');
            newimg.setAttribute('src', previewImgUrl);
            newimg.setAttribute('height', '44px');
            newimg.setAttribute('width', '78px');
            newimg.setAttribute('class', 'photo');
            newimg.setAttribute('alt', ImgTitle);
            //newimg, setAttribute('title', ImgTitle);
            newimg.setAttribute('id', imageID);
            newimg.setAttribute('tag', oListItem.get_item('FileRef') + ";" + previewImgUrl);
            newimg.setAttribute('onmouseover', "javascript:SetMediaSourceImage(this)");
            newimg.setAttribute('onclick', "javascript:SetMediaSource(this)");
            aTag.appendChild(newimg);
            imgHost.appendChild(aTag);
            count++;
            counter++;
        }
        if (click == null) {
            document.getElementById("pag").innerHTML = (pageCount - 3) + '-' + pageCount + ' of ' + itemCount;
        }

        //        if (counter != 4) {
        //            document.getElementById('next').disabled = true;
        //        }
    }

    function onQueryFailed(sender, args) {

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

</script>

No comments:

Post a Comment