Entertainment Tool on AAC Source Code Repository
The revamp of Entertainment Tool is primarily written using AngularJS. It has a two-tiered, tabbed layout with the top tier mostly* listing premium packages and the second tier categorizing and displaying selling points and other miscellaneous information.
*The Calendar tab lists Movie and Series data across all premium packages, filterable by various metadata.
- Easier content maintenance
- Faster performance
- Less prone to caching issues
- Updated presentation and enhanced UX
- Robust, filterable Movie/Series listings
The content for Entertainment Tool is now maintained via a Master Spreadsheet which is updated and converted into JSON data using a Parser.
Each sheet in the document corresponds to a root property in the JSON data. Each of those have the following properties:
- name
- aacURL
- The url of the premium landing page on AAC
- streamName
- The name of the third-party streaming service included with a DIRECTV subscription
- streamFrag
- The Fragment ID of the third party streaming service on AAC
- dotcomURL
- The premium's landing page on DIRECTV.com
- premURL
- The premium's proprietary website
- price
- ODchan
- The On Demand Channel for that premium
- logo
- Filename for a premium logo. Only used if the URL encoded name would not suffice as the logo filename.
- subtabs
- The subtabs that should be available for a specific premium in order. This uses the ID determined in the subtab sheet/object
- disclosures
- The disclosures that should be available for a specific premium in order. This uses the ID determined in the disclosures sheet/object
- ID
- Determined by the premium's row position in the spreadsheet
- name
- ID
- Determined by the subtab's row position in the spreadsheet
Used to populate Channels subtabs within premiums and high level channel info in the Premium view aside.
- premium
- name
- description
- number
- HD
- Boolean to describe the channels HD compatibility
- SD
- Boolean to describe the channels SD compatibility
- logo
- Filename for a channel logo. Only used if the URL encoded name would not suffice as the logo filename.
Entertainment tool uses several types of Selling Points. Evergreen points change infrequently and are styled as black text on a white background separated by a horizontal rule. Programming selling points have titles and are styled in an accordion with programming titles in white text on a blue background. This styling also applies to selling points regarding ordering or pricing of Cinema titles. Streaming selling points are displayed in a single column with each point bordered in blue.
- premium
- subtab
- title
- Title displayed in accordion header (does not apply for evergreen selling points)
- point
- evergreen
- Boolean to determine whether the content is evergreen or not
Objections are displayed in an accordion with titles in white text on a grey background. The responses to each objection are grouped by objection.
- premium
- objection
- response
Disclosures work similarly to objections and are displayed in an accordion with titles in white text on an orange background. The disclosures have a top level (or category) with each disclosure having several specific disclosures grouped within.
- lvl1
- lvl2
Each program in the Calendar tab listing is an object of various data. This data is used primarily in the Calendar view, but is also queried for the now playing section and Overview header images. (Images are dynamically pulled from the first three listings per premium)
- program
- The title of the program
- premium
- chanName
- chanNum
- premDate
- premTime
- dayWeek
- The day of the week the series episode premieres occur. Null entries flag the program as a movie. Otherwise the program is considered a series
- finDate
- The date the series finale occurs
- repDate
- Comma separated array of dates which a movie reruns
- onDemand
- startOD
- keyDemos
- genres
- starActrs
- starDrctrs
- starPrdcrs
- description
- image
- Filename for a program image. Only used if the URL encoded program would not suffice as the image filename.
Handles initial routing/redirecting, scope variables for all views except Calendar.
Handles routing, getting/setting filter values to/from url params for Calendar view
- HTML head
- Logo and title header
- Top level navigation
- Premium or Calendar view template placeholder
- Webtrends script
- Second level navigation
- Conditionally any of the partials below.
- Playing This Month
- Overview photos (currently not a partial but part of the premium view)
- Logo, price, channel info, useful links (currently not a partial but part of the premium view)
- Selling Points
- Objections Disclosures
- Titled/accordion Selling points
- Streaming
- Channels
- Pricing (DTV Cinema)
- Breakdown (Streaming)
- Filter inputs
- Filtered programs with basic data
- Modal program drilldown with more in-depth data
- Link to PDF of yearly series info
- Date inputs use Modernizr to check for native feature and falls back on jQuery UI Datepicker when necessary
- Date range filter uses Moment.js for date comparison
- Program listing with basic data filtered by premium and programming type (set via route) displayed as a vertical carousel
- Carousel uses Cycle2 library
- List of selling points filtered by evergreen boolean, premium and subtab params
- List of objections displayed in an accordion that expands to reveal the responses to each objection
- List of disclosures categories displayed in an accordion that expands to reveal the specific disclosure required
- List of titled selling points displayed in an accordion that expands to reveal more detailed information
- There are several variations which are determined/filtered by subtab:
- Movies
- Original Programming
- Encore
- ESPN College Extra
- Ways To Order
- PPV Life Cycle
- List of selling points with customized Heading
- Hard coded table displaying pricing information for DIRECTV Cinema programming
- Interactive table comparing DIRECTV with several competitive streaming services
- Currently the data is stored in a JSON object (versus.js) in the MainCtrl scope.
Active Tabs- Completed: 1/12 - add6e72
Fix programming type filter- Completed: 1/13 - ddc1a89
Fluid Now Playing images on IE 11- Completed: 1/13 - d2d00b4
Revert to old QL script- Completed: 1/14
Same name program modal issue- Completed: 1/14 - 538d57c
Finish Documentation- Version 1 completed: 2/5 - 7103e04
- Developer comments in code
- Additional Calendar info
- IE styling (CSS3PIE)
- Calendar item limit (for IE8 performance)
- Add Competitive Streaming Services data to spreadsheet/parser
- Add Cinema pricing to spreadsheet/parser
- Back Button in IE (When previous subtab is not available in new top tier tab)
- Script error for slideshow plugin
- Short term fix: debug plugin
- Long term fix: Angular based slideshow/carousel (no vendor plugin)
- Hide Now Playing view if no programming is available
- Helpful Links layout/style (Line breaks are awkward)
Datepicker init issues- Switched to jQuery UI library for Datepicker
- Completed 2/22 - c243877
- Create and implement custom jQuery UI build with just Datepicker
- Apply date range filter to start date
- Responsive Layout
- Channel counts disclaimer ("Never discuss exact channel counts")
- Sticky header (esp for calendar tab)
- Price info -> Pricing Tab link for Cinema
- Modal close on escape keypress
- Premium "aside" to it's own partial