@screwtopmedia/cdf-ng-media

Angular module for displaying media assets (images, videos)

Stats

stars 🌟issues ⚠️updated 🛠created 🐣size 🏋️‍♀️
00Jun 6, 2018Mar 29, 2018Minified + gzip package size for @screwtopmedia/cdf-ng-media in KB

Readme

CDF Media UI Module (@screwtopmedia/cdf-ng-media)

version downloads

CDF-NG-MEDIA is an Angular module containing UI components for displaying different forms of media (images and/or video). This module simplifies the displaying of media assets. CDF-NG-MEDIA is a UI module existing in Content Delivery Framework's eco-system.

Happy Coding!

Requirements

CDF-NG-MEDIA requires the latest version of Angular (at the time of this writing: 2.4.7).

  //package.json

  "dependencies": {
    "@angular/common": "2.4.7",
    "@angular/compiler": "2.4.7",
    "@angular/core": "2.4.7",
    "@angular/forms": "2.4.7",
    "@angular/http": "2.4.7",
    "@angular/platform-browser": "2.4.7",
    "@angular/platform-browser-dynamic": "2.4.7",
    "@angular/router": "3.4.7"
    ...
  }

CDF-NG-MEDIA also utilizes the following 3rd party sources:

  • JW Player as the vehicle for loading videos. CDF-NG-MEDIA is currently using:
    • JW Player version 7.12.11

Installation

CDF-NG-MEDIA requires a JW Player key in order for JW Player to work correctly. You will need to create an account and establish a JW Player key. You will provide the JW Player Key during configuration. See JW Player for creating an account.

Installing CDF-NG-MEDIA in your Angular application:

    //STEP 1: INSTALL CDF-NG-MEDIA

    npm install @screwtopmedia/cdf-ng-media --save

...................................................

    //STEP 2: create a config file (cdf-media-config.ts) to provide configuration settings:

    import { ConfigInterface } from '@screwtopmedia/cdf-ng-media/lib';

    export const CdfMediaConfig: ConfigInterface =
      {
        JwPlayerKey: 'YOUR JW PLAYER KEY'
      };

...................................................
  //STEP 3: configure your AppModule:

    // app.module.ts
    import { CdfModule } from '@cdf/cdf-ng/lib';
    import { CdfMediaConfig } from './configs';

    @NgModule({
      declarations: [ ... ],
      imports: [
        ...
        //3rd PARTY
        CdfMediaModule.forRoot(CdfMediaConfig),
      ],
      providers: [ ... ],
      bootstrap: [ ... ]
    })
    export class AppModule { }

CDF-NG-MEDIA Models

CDF-NG-MEDIA containes the following models needed to show media asset(s):

  • CdfMediaModel
  • CdfVideoModel

CdfMediaModel

CdfMediaModel is the model that contains data about the media asset (image and/or video). CdfMediaModel contains the following data points:

    Id: string;
    Type: string;
    Title: string;
    Description: string;
    ImageUri: string;
    YouTubeId: string;
    VideoList: CdfVideoModel[] = [];
    HasImage: boolean = false;
    HasVideo: boolean = false;
  • Type can be used to apply a label ontop of the media asset (perfect for a collection of media assets of different types)
  • ImageUri is the complete http URL to an image
  • YouTubeId is the unique value representing a YouTube video (ex. 8geR0yacozY)
  • VideoList is an optional collection of URIs to different videos. This is a placeholder for future functionality

CdfVideoModel

CdfVideoModel is a placeholder data model for future development.

CDF-NG-MEDIA Components

CDF-NG-MEDIA containes the following components you can use:

  • CdfMediaComponent
  • CdfMediaSliderComponent
  • CdfVideoBackgroundComponent

CdfMediaComponent

CdfMediaComponent is the base component used to display either an image or a video. CdfMediaComponent consumes CdfMediaModel which contains all the data necessary to determine if the media asset is a video or an image.

CdfMediaSliderComponent

CdfMediaSliderComponent is a component handling a collection of CdfMediaModels (mix of images and/or videos). CdfMediaSliderComponent arranges the media in a grid. If one of the items is a video, then playing the video will cause an information pane to slide out showing media's title, type, description and a button to click. You can toggle on/off title, type, and description.

<cdf-media-slider [mediaModelList]="mediaModelList"
    [showType]="showType"
    [showTitle]="showTitle"
    [showDescription]="showDescription"
    (onImageClick)="doMediaClick($event)"></cdf-media-slider>

CdfVideoBackgroundComponent

CdfVideoBackgroundComponent uses JW Player's capability to run a video contained in CdfMediaModel in the background.

Helpful Links

Release History

  • 1.2.0
    • made cdf-media-slider self-contained
  • 1.1.3
    • removed configuration requirement passing in image source URL
  • < 1.0.65
    • Rounds and rounds of trial and error...

Meta

Tom Schreck – @tschrecktom_schreck@solutiaconsulting.com

https://github.com/tomschreck

License

MIT

If you find any bugs or have a feature request, please open an issue on github!

The npm package download data comes from npm's download counts api and package details come from npms.io.