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="http://cdn.arnoldbiffna.com/blogvideo/";
    $scope.video_thumb_prefix="http://cdn.arnoldbiffna.com/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/'
        }

    ];


});

MindJolt

 

In 2011, I joined the team at MindJolt Inc., now SGN. The founders of MySpace had created this game company who’s main product was the MindJolt App on Facebook. It’s a game portal with thousands of Flash based games, and runs in Facebook as well as a stand-alone site. At one point I believe it had over 13 Million users, and chances are if you play games on Facebook, you’ve seen it.

Flash API
To allow the Flash games to communicate with the MindJolt  App,  they all load another  Flash file,  which is a bridge to the back end and other non-Flash code. The MindJolt Flash API was my main project for quite some time. It dealt with Ads, tracking, user information, settings, and much more. As the MindJolt stack was constantly being improved, changes to the Flash API were always in need.

Games on Mindjolt
I also updated the source code for several of the Flash Games. As new features were introduced in the API , some of the games were modified to take advantage of them. The games you see in the video above are some of the ones I worked on.

Big Games
Later on, I worked on several other games outside of the Mindjolt app such as Panda Jam, Jewels of the Amazon, Bubble Atlantis, as well several enhancements via the Facebook and PlayerIO APIs.

C#
Some other projects included C# work as well. One was to convert a Flash tracking API swf to a C# DLL for Unity projects. Another was to process user information and statistics data for PlayerIO (now the Yahoo Games Network). The PlayerIO SDK has both an ActionScript and C# API.

Panda Jam Ads

 

 The ad that pops up over the Facebook Flash game Panda Jam are actually HTML / CSS / JavaScript / and ActionScript all working together. Panda Jam has over 1 million players world wide and monetizes on each ad shown. Inter-level ads display in between levels of the game and use Adap TV’s JavaScript API. For the Ad Sales team, I programmed it with a complex set of factors of how and when to show ads, such as:

  • no ads until the 2nd round
  • don’t show more than 1 ad within a minute
  • no ads for users who made a purchase in the past
  • no more than two ads per game
  • restrict ads to certain geographic regions determined by Facebook API
  • Ad server errors would get trapped and bypass the ad, so the user would not be affected

These settings were all configurable via an xml and may have changed since. Once the ad completes, the game resumes. Using JQuery and the Adap TV JavaScript API, PlayerIO API, and ActionScript’s External Interface, this system was then integrated into other games.Launch Flash!see it