Month: June 2014

Video List Using Angular JS

Something I’ve been meaning to do is add a video gallery or list of videos contained in this blog. Rather than install a WordPress plugin, I decided to build one on my own using the popular JavaScript library, Angular JS, along with HTML, CSS, JavaScript, and a Lightbox library for showing videos. What I like about Angular for my Video List is that it has some functionality I would normally use PHP for, like dynamically drawing rows for each record of data. In this code screen shot below, the top half is the header row that contains the list filter and sortable title, while the bottom half is where all the other rows repeat for the data in the model.

<!-- this row has the filter input text and sortable title -->
<tr>

    <td>filter: <input type="text"  ng-model="searchText" /> </td>
    <td>blog link  <a href="" ng-click="predicate = 'title'; 
    reverse=false">(a-z)</a>
        <a href="" ng-click="predicate = '-title'; reverse=false">(z-a)</a></td>
    <td>dimensions width x height</td>
    <td>video link</td>
</tr>
<!-- this is where the rows repeat according to the data -->

<tr  ng-repeat="vid in video_list | filter:searchText | orderBy:predicate:reverse">

    <td><img src="{{video_thumb_prefix+vid.url_thumb}}"/> </td>
    <td><a href="{{vid.blog}}"
    target="blog"><h1>{{vid.title}}</h1></a></td>
    <td>{{vid.vid_width + ' x ' +vid.vid_height}}</td>
    <td>
        <a href="{{video_media_prefix+vid.url_media}}"
        rel="shadowbox;width={{vid.vid_width}};height={{vid.vid_height}}"
        title="{{vid.title}}">{{vid.url_media}}</a>
    </td>
</tr>

Notice the ng-repeat – thats the magic right there for looping through data. The other great feature is that the data is live. As you enter text in the filter, the rows render to match what you typed. Using Angular instead of a server side language enabled me to host it on my CDN as a static set of files (vs dynamic). It’s all .html, .css, .js, and .mp4 videos – no PHP. Download the source to see how it all ties together with the data:

 
   $scope.video_media_prefix="https://d3od4vl78dd97d.cloudfront.net/blogvideo/";
    $scope.video_thumb_prefix="https://d3od4vl78dd97d.cloudfront.net/blogpreviews/";
    $scope.predicate = '-title';
    $scope.video_list=[

        {
            id:0,
            url_media:'tron1.mp4',
            url_thumb:'tron1.jpg',
            title:'Tron',
            vid_width:640,
            vid_height:480,
            blog:'http://www.arnoldbiffna.com/2014/05/20/tron/'
        },
        {
            id:1,
            url_media:'radionbt.mp4',
            url_thumb:'radionbt.jpg',
            title:'Radio Disney Next Best Thing',
            vid_width:508,
            vid_height:384,
            blog:'http://www.arnoldbiffna.com/2014/05/21/radio-disney-n-b-t/'
        },
        {
            id:2,
            url_media:'jonasbrothers.mp4',
            url_thumb:'jonasbrothers.jpg',
            title:'The Jonas Brothers',
            vid_width:511,
            vid_height:322,
            blog:'http://www.arnoldbiffna.com/2014/05/21/jonas-brothers/'
        },
        {
            id:3,
            url_media:'pepsirefresh.mp4',
            url_thumb:'pepsirefresh.jpg',
            title:'Pepsi Super Bowl',
            vid_width:509,
            vid_height:354,
            blog:'http://www.arnoldbiffna.com/2014/05/20/pepsi-super-bowl/'
        },
        {
            id:4,
            url_media:'pandajamad.mp4',
            url_thumb:'pandajamad.jpg',
            title:'Panda Jam Ads',
            vid_width:640,
            vid_height:480,
            blog:'http://www.arnoldbiffna.com/2014/05/14/panda-jam-ads/'
        }

    ];


});

MookieData C#

 

In 2012 when I was trying to make my game, SlotFriendzy profitable, I felt the need for an Admin tool to analyze the game’s usage and performance. I didn’t want it to be hosted on the web and decided to build it as a Windows Desktop App. I chose Visual Studio and built it on the .NET 4.5 Framework, along with a MySQL C# Connector I downloaded from the MySQL web site.

For security reasons, I normally would not put a database connector directly in a client-side application, but in this case, the intended audience was very a specific population – me. Designing a Form based app in Visual Studio was easy, and this simple layout made it easy to add commands every time I thought of something I wanted to query on a regular basis.

I named it MookieData because the game belonged to my company, Mookie Games Inc.