@wiztivi/dana-templates 0.0.16 → 0.0.18

package/app-template/gitignoreTemplate.hbs

@@ -13,6 +13,7 @@ systemjs.node.config.json
 .transpileCache
 doc/reports
 .dana-env
+archive*.zip
 
 # nyc temp files
 .nyc_output

package/app-template/scripts/app/theme/AppTheme.js

@@ -20,7 +20,7 @@ export default $AbstractTheme.declare("AppTheme", {
         ///////////////////////////////////////////////////////////////////////
         RobotoRegular: "RobotoRegular",
         RobotoBold: "RobotoBold",
-        icons: "",
+        MockIcons: "",
 
         ///////////////////////////////////////////////////////////////////////
         // COLORS

package/modules/fip/scripts/ui/views/PlayButtonView.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line @dana/no-import-rendered-view
-import $RenderedView from "@RenderedView";
+import $View from "@View";
 import $RectanglePrimitive from "@RectanglePrimitive";
 import $TextPrimitive from "@TextPrimitive";
 
@@ -10,12 +9,12 @@ import $Theme from "@Theme";
  *
  * @name PlayButtonView
  * @class
- * @extends RenderedView
+ * @extends View
  *
  * @property {boolean} isInteractive flag
  */
 
-export default $RenderedView.declare("PlayButtonView", {
+export default $View.declare("PlayButtonView", {
     statics: /** @lends PlayButtonView */ {
         MARGIN: 20
     },

package/modules/home/package.json

@@ -1,4 +1,5 @@
 {
     "name": "home",
-    "description": "HOME module"
+    "description": "HOME module",
+    "version": "1.0.0"
 }

package/modules/home/scripts/services/mock/highlightMock.json

@@ -0,0 +1,40 @@
+{
+    "data": [
+        {
+            "id": "df2bf24f-587c-4d28-8514-d6077d2d3a42",
+            "original_title": "Halloween III: Season of the Witch",
+            "imageUrl": "https://image.tmdb.org/t/p/original/WABfdeaThFYXCySGIOvRNv2sSW.jpg",
+            "fallbackUrl": "https://image.tmdb.org/t/p/original/eyOKqtgNeEEIp7zYMHnpISpsaS3.jpg"
+        },
+        {
+            "id": "e27b38c1-ad1b-4636-a738-ff8dcfdb109d",
+            "original_title": "Superman: Doomsday",
+            "imageUrl": "https://image.tmdb.org/t/p/original/itvuWm7DFWWzWgW0xgiaKzzWszP.jpg",
+            "fallbackUrl": "https://image.tmdb.org/t/p/original/oTPSjQyETTFYDehdbiG8yi2oDmL.jpg"
+        },
+        {
+            "id": "875c0a94-2735-4bf3-9e8c-76d426871ded",
+            "original_title": "White Heat",
+            "imageUrl": "https://image.tmdb.org/t/p/original/4ekAK25fz1FDzRUHuJs171uiVaI.jpg",
+            "fallbackUrl": "https://image.tmdb.org/t/p/original/cap8458wFeRCJSKxL758dI82TRK.jpg"
+        },
+        {
+            "id": "fd82d7eb-3028-4206-891b-8132130f37ba",
+            "original_title": "Greed",
+            "imageUrl": "https://image.tmdb.org/t/p/original/mZPmDFlVp1BSGQD4QCKHOwbXLfv.jpg",
+            "fallbackUrl": "https://image.tmdb.org/t/p/original/cgmGPmyeShz9zM9GQM5EEgMutnd.jpg"
+        },
+        {
+            "id": "23dafbcc-5cc6-43ba-977a-32100e1e6e53",
+            "original_title": "Hello, Dolly!",
+            "imageUrl": "https://image.tmdb.org/t/p/original/aPZOt9BR3gnk1RyX924ySq81S4P.jpg",
+            "fallbackUrl": "https://image.tmdb.org/t/p/original/rvsPkUYhWZkAKMb2fnWHw5pNAjZ.jpg"
+        },
+        {
+            "id": "9fb75c7e-3dc4-4e7a-a048-29eb4b2ab734",
+            "original_title": "Wrong Place",
+            "imageUrl": "https://image.tmdb.org/t/p/original/mlEtOQAQVy6eW65sHz3UduvzRK.jpg",
+            "fallbackUrl": "https://image.tmdb.org/t/p/original/zSre0UHWLSnDoNrM9F2Go9OXq5G.jpg"
+        }
+    ]
+}

package/modules/home/scripts/ui/screens/HomeScreen.js

@@ -4,10 +4,12 @@ import $RectanglePrimitive from "@RectanglePrimitive";
 import $MenuView from "@MenuView";
 import $HomeScrollView from "@HomeScrollView";
 import $Theme from "@Theme";
+import $HighlightRailItemView from "@HighlightRailItemView";
 
 // TODO remove and get data from service
 import $ListModel from "@ListModel";
 import homeScrollMock from "homeScrollViewMock.json!";
+import highlightMock from "highlightMock.json!";
 import menuMock from "menuMock.json!";
 
 /**
@@ -19,6 +21,15 @@ import menuMock from "menuMock.json!";
  * @screen
  */
 export default $AppScreen.declare("HomeScreen", {
+    statics: /** @lends HomeScreen */ {
+        MARGIN_TOP: 60,
+        MARGIN_LEFT: 108,
+        LOGO_WIDTH: 183,
+        LOGO_HEIGHT: 60,
+        LOGO_X: 1642,
+        MENU_SCROLL_GAP: 100,
+        SCREEN_HORIZONTAL_MARGIN: 50
+    },
 
     children: /** @lends HomeScreen.prototype */ {
         background: {class: $RectanglePrimitive},
@@ -27,6 +38,7 @@ export default $AppScreen.declare("HomeScreen", {
             url: ({theme}) => theme.getImageUrl($Theme.APP_LOGO_URL)
         },
         menu: {class: $MenuView},
+        highlight: {class: $HighlightRailItemView},
         scrollView: {class: $HomeScrollView}
     },
 
@@ -37,7 +49,7 @@ export default $AppScreen.declare("HomeScreen", {
 
         /**
          * Prepare screen data: get the business data to feed the views
-         * View should always be full filled with business model(s).
+         * View should always be fulfilled with business model(s).
          *
          * It must return an Object.
          *
@@ -46,13 +58,15 @@ export default $AppScreen.declare("HomeScreen", {
          * @override
          */
         prepareData: function (context) {
-            if(!context.isBack) {
+            if (!context.isBack) {
                 // TODO get data from service
                 const data = {};
                 const scrollData = this._getScrollDataFromMock();
-                const menuData= this._getMenuDataFromMock();
+                const menuData = this._getMenuDataFromMock();
+                const highlightData = this._getHighlightDataFromMock();
                 data.scrollData = scrollData;
                 data.menuData = menuData;
+                data.highlightData = highlightData;
                 return Promise.resolve(data);
             }
             return Promise.resolve(this.data)
@@ -68,11 +82,15 @@ export default $AppScreen.declare("HomeScreen", {
         connectData: function (context) {
             this.scrollView.setData(this.data.scrollData, {index: this.data.scrollIndex});
             this.menu.setData(this.data.menuData);
+            this.highlight.setData(this.data.highlightData);
         },
 
         _getChildToFocus: function (options) {
-            if(options.isBack && options.previousScreenId === "fipScreen") {
-                return this.scrollView
+            if (options.isBack && options.previousScreenId === "fipScreen") {
+                return this.scrollView;
+            }
+            if (options.isBack && options.previousScreenId === "playerScreen") {
+                return this.highlight;
             }
             return this.menu;
         },
@@ -82,10 +100,12 @@ export default $AppScreen.declare("HomeScreen", {
          */
         down: function (key) {
             if (this.focusedChild === this.menu) {
+                return this.highlight.focus();
+            }
+            if (this.focusedChild === this.highlight) {
+                this._showScrollView();
                 return this.scrollView.focus();
             }
-            this.menu.hide();
-            this.setState("hideLogo")
             return this.focusedChild.down();
         },
 
@@ -93,18 +113,19 @@ export default $AppScreen.declare("HomeScreen", {
          * @override
          */
         up: function (key) {
-            let nav;
 
+            if (this.focusedChild === this.highlight) {
+                return this.menu.focus();
+            }
             if (this.focusedChild === this.scrollView) {
-                nav = this.scrollView.up();
-                if (this.scrollView.index === 0) {
-                    this.menu.show();
-                    this.setState("!hideLogo")
+                let nav = this.scrollView.up();
+                if(!nav) {
+                    this._hideScrollView();
+                    return this.highlight.focus();
+                } else {
+                    return nav;
                 }
             }
-            if (!nav) {
-                return this.menu.focus();
-            }
             return false;
         },
 
@@ -115,6 +136,9 @@ export default $AppScreen.declare("HomeScreen", {
             if (this.focusedChild === this.menu) {
                 return this.menu.right();
             }
+            if (this.focusedChild === this.highlight) {
+                return this.highlight.right();
+            }
             return this.scrollView.right();
         },
 
@@ -125,6 +149,9 @@ export default $AppScreen.declare("HomeScreen", {
             if (this.focusedChild === this.menu) {
                 return this.menu.left();
             }
+            if (this.focusedChild === this.highlight) {
+                return this.highlight.left();
+            }
             return this.scrollView.left();
         },
 
@@ -134,19 +161,25 @@ export default $AppScreen.declare("HomeScreen", {
         ok: function (key) {
             if (this.focusedChild === this.menu) {
                 const route = this.menu.buttonList.dataItem.route;
-                return this.route(route);
+                if (route !== "home") {
+                    return this.route(route);
+                }
             }
             if (this.focusedChild === this.scrollView) {
                 this.data.scrollIndex = this.focusedChild.index
                 return this.route("fip", { data: this.scrollView.dataItem });
             }
+            if (this.focusedChild === this.highlight) {
+                return this.route("player");
+            }
         },
 
         /**
          * @override
          */
         back: function (key) {
-            return this.routeToPrevious();
+            // Do not route to SplashScreen
+            return false;
         },
 
         _getScrollDataFromMock: function() {
@@ -172,13 +205,31 @@ export default $AppScreen.declare("HomeScreen", {
         _getMenuDataFromMock: function() {
             return menuMock.data.map((el) => ({ iconText: el.iconText, text: el.text, route: el.route }))
 
+        },
+
+        _getHighlightDataFromMock: function () {
+            return highlightMock.data.map((el) => ({imageUrl: el.fallbackUrl, title: el.original_title}));
+        },
+
+        _showScrollView: function () {
+            this.setState("hideLogoAndHighlight");
+            this.menu.hide();
+            this.highlight.stopCarousel();
+        },
+
+        _hideScrollView: function () {
+            this.setState("!hideLogoAndHighlight");
+            this.menu.show();
+            this.highlight.startCarousel();
         }
     },
 
     states: {
-        hideLogo: {
+        hideLogoAndHighlight: {
             "logo.opacity": 0,
-        }
+            "highlight.opacity": 0,
+            "highlight.height": 0
+        },
     },
 
     style: {
@@ -188,18 +239,24 @@ export default $AppScreen.declare("HomeScreen", {
             fillColor: $Theme.COLOR_BACKGROUND
         },
         menu: {
-            x: 50,
-            y: 50
+            x: ({parent}) => parent.statics.MARGIN_LEFT,
+            y: ({parent}) => parent.statics.MARGIN_TOP,
+            height:({parent}) => parent.statics.MARGIN_TOP
         },
         logo: {
-            width: 323,
-            height: 120,
-            x: ({width}) => $Theme.FULL_SCREEN_WIDTH - width - 50,
-            y: 15
+            width: ({parent}) => parent.statics.LOGO_WIDTH,
+            height: ({parent}) => parent.statics.LOGO_HEIGHT,
+            x: ({parent}) => parent.statics.LOGO_X,
+            y: ({parent}) => parent.statics.MARGIN_TOP
+        },
+        highlight: {
+            height: 668,
+            width: $Theme.FULL_SCREEN_WIDTH,
+            y: ({parent}) => parent.menu.y + 120
         },
         scrollView: {
-            x: 50,
-            y: 250
+            x: ({parent}) => parent.statics.MARGIN_LEFT,
+            y: ({parent}) => parent.highlight.y + parent.highlight.height + 100
         }
     }
 });

package/modules/home/scripts/ui/views/highlight/DotsListItemView.js

@@ -0,0 +1,37 @@
+import $ListViewItem from "@ListViewItem";
+import $RectanglePrimitive from "@RectanglePrimitive";
+import $Theme from "@Theme";
+
+/**
+ * Display dots
+ *
+ * @name DotsListItemView
+ * @class
+ * @extends ListViewItem
+ * @property {boolean} isInteractive - interactive item for pointer
+ */
+export default $ListViewItem.declare("DotsListItemView", {
+    properties: /** @lends DotsListItemView.prototype */ {
+        isInteractive: true
+    },
+
+    children: /** @lends DotsListItemView.prototype */ {
+        dotsView: {class: $RectanglePrimitive}
+    },
+
+    transitions: {
+        scale: {duration: 100}
+    },
+
+    style: {
+        height: ({dotsView}) => dotsView.height,
+        width: ({dotsView}) => dotsView.width,
+        x: ({previousItem}) => previousItem == null ? 0 : previousItem.x + previousItem.width + 20,
+        dotsView: {
+            width: 18,
+            height: 18,
+            borderRadius: 9,
+            fillColor: ({parent})=> parent.isSelected ? $Theme.COLOR_ACCENT : $Theme.COLOR_TEXT
+        }
+    }
+});

package/modules/home/scripts/ui/views/highlight/DotsListView.js

@@ -0,0 +1,22 @@
+import $ListView from "@ListView";
+import $DotsListItemView from "@DotsListItemView";
+
+/**
+ * Displays a list of dots
+ *
+ * @name DotsListView
+ * @class
+ * @extends ListView
+ *
+ * @property {DotsListItemView} itemViewClass - the itemViewClass
+ */
+export default $ListView.declare("DotsListView", {
+    properties: /** @lends DotsListView.prototype */ {
+        itemViewClass: () => $DotsListItemView
+    },
+
+    style: {
+        height: ({lastItemView}) => lastItemView ? lastItemView.height : 0,
+        width: ({lastItemView}) => lastItemView ? lastItemView.width + lastItemView.x : 0
+    }
+});

package/modules/home/scripts/ui/views/highlight/HighlightContentDescriptionView.js

@@ -0,0 +1,99 @@
+import $View from "@View";
+import $ImagePrimitive from "@ImagePrimitive";
+import $RectanglePrimitive from "@RectanglePrimitive";
+import $TextPrimitive from "@TextPrimitive";
+import $HighlightPlayButtonView from "@HighlightPlayButtonView";
+import $Theme from "@Theme";
+
+/**
+ * Displays content description
+ *
+ * @name HighlightContentDescriptionView
+ * @class
+ * @extends View
+ */
+export default $View.declare("HighlightContentDescriptionView", {
+    statics: /** @lends HighlightContentDescriptionView */ {
+        WIDTH: 696,
+        CONTENT_TITLE_SIZE: 42,
+        DEFAULT_FONT_SIZE: 20,
+        SCREEN_HORIZONTAL_MARGIN: 50,
+        COLOR_TRANSPARENT: "#00000000",
+        HIGHLIGHT_HEIGHT: 668,
+        DOWNGRADIENT_HEIGHT: 200
+    },
+
+    children: /** @lends HighlightContentDescriptionView.prototype */ {
+        highlightImage: {
+            class: $ImagePrimitive
+        },
+        rightGradient: {
+            class: $RectanglePrimitive
+        },
+        downGradient: {
+            class: $RectanglePrimitive
+        },
+        title: {
+            class: $TextPrimitive,
+            text: "No title"
+        },
+        playButton: {
+            class: $HighlightPlayButtonView
+        }
+    },
+
+    methods: {
+        setData: function (data) {
+            this.highlightImage.url = data.imageUrl || "";
+            this.title.text = data.title || "no title";
+        },
+
+        //////////////////////////////////////////////////////////////////////////////////////////
+        // FOCUS
+        //////////////////////////////////////////////////////////////////////////////////////////
+
+        _getChildToFocus: function () {
+            return this.playButton;
+        }
+    },
+
+    style: /** @lends HighlightContentDescriptionView.prototype */ {
+        height: 668,
+        width: $Theme.FULL_SCREEN_WIDTH,
+        highlightImage: {
+            width: ({parent}) => parent.width,
+            height: 668,
+            opacity: 0.8
+        },
+        rightGradient: {
+            width: $Theme.FULL_SCREEN_WIDTH / 2,
+            height: ({parent})=> parent.height,
+            gradientDirection: "to right",
+            gradientColorStart: $Theme.COLOR_BACKGROUND,
+            gradientColorEnd: ({parent}) => parent.statics.COLOR_TRANSPARENT
+        },
+        downGradient: {
+            y: ({parent}) => parent.height - parent.statics.DOWNGRADIENT_HEIGHT,
+            width: $Theme.FULL_SCREEN_WIDTH,
+            height: ({parent}) => parent.statics.DOWNGRADIENT_HEIGHT,
+            gradientDirection: "to bottom",
+            gradientColorStart: ({parent}) => parent.statics.COLOR_TRANSPARENT,
+            gradientColorEnd: $Theme.COLOR_BACKGROUND
+        },
+        title: {
+            // eslint-disable-next-line @dana/no-use-width-height-auto
+            isAuto_width: true,
+            height: ({parent}) => parent.statics.CONTENT_TITLE_SIZE + 10,
+            size: ({parent}) => parent.statics.CONTENT_TITLE_SIZE,
+            x: ({parent}) => parent.statics.SCREEN_HORIZONTAL_MARGIN,
+            y: ({parent, height}) => (parent.height - height) / 2 + 100,
+            family: $Theme.RobotoBold,
+            color: $Theme.COLOR_TEXT
+        },
+        playButton: {
+            x: ({parent}) => parent.statics.SCREEN_HORIZONTAL_MARGIN,
+            y: ({parent}) => parent.title.y + 100,
+            size: 30
+        }
+    }
+});

package/modules/home/scripts/ui/views/highlight/HighlightPlayButtonView.js

@@ -0,0 +1,63 @@
+import $View from "@View";
+import $RectanglePrimitive from "@RectanglePrimitive";
+import $TextPrimitive from "@TextPrimitive";
+
+import $Theme from "@Theme";
+
+/**
+ * Play Button
+ *
+ * @name HighlightPlayButtonView
+ * @class
+ * @extends View
+ *
+ * @property {boolean} isInteractive flag
+ */
+
+export default $View.declare("HighlightPlayButtonView", {
+    statics: /** @lends HighlightPlayButtonView */ {
+        MARGIN: 20
+    },
+
+    properties: /** @lends HighlightPlayButtonView.prototype */ {
+        isInteractive: true
+    },
+
+    children: /** @lends HighlightPlayButtonView.prototype */ {
+        button: {
+            class: $RectanglePrimitive
+        },
+        title: {
+            class: $TextPrimitive,
+            text: "Play"
+        }
+    },
+
+    states: {
+        focused: {
+            "button.borderColor": $Theme.COLOR_TEXT
+        }
+    },
+
+    style: /** @lends HighlightPlayButtonView.prototype */ {
+        width: ({title, statics}) => title.width + 2 * statics.MARGIN,
+        height: 60,
+        title: {
+            color: $Theme.COLOR_TEXT,
+            size: 35,
+            x: ({parent}) => parent.statics.MARGIN,
+            y: 8,
+            isAuto_width: true, // eslint-disable-line @dana/no-use-width-height-auto
+            height: 50,
+            family: $Theme.RobotoBold
+        },
+        button: {
+            borderWidth: 5,
+            fillColor: $Theme.COLOR_ACCENT,
+            borderColor: $Theme.COLOR_ACCENT,
+            width: ({parent}) => parent.width,
+            height: 60,
+            borderRadius: 12
+        }
+    }
+});

package/modules/home/scripts/ui/views/highlight/HighlightRailItemView.js

@@ -0,0 +1,186 @@
+import $ScrollItemView from "@ScrollItemView";
+// CONST
+import $DateUtils from "@DateUtils";
+import $TimerManager from "@TimerManager";
+import $Easing from "@Easing";
+// VIEW
+import $HighlightContentDescriptionView from "@HighlightContentDescriptionView";
+import $DotsListView from "@DotsListView";
+
+/**
+ * @name HighlightRailItemView
+ * @class
+ * @extends ScrollItemView
+ * @property {number} nbViewBefore - the number of highlightTile to keep before
+ * @property {number} nbViewAfter - the number of highlightTile to keep after
+ * @property {number} direction - the screen direction
+ * @property {TimerManager} timerManager - the TimerManager instance
+ * @property {Boolean} interactiveArrow - disable arrows
+ */
+export default $ScrollItemView.declare("HighlightRailItemView", {
+
+    statics: {
+        RATIO: 4 / 15,
+        HIGHLIGHT_HEIGHT: 668,
+        CAROUSEL_TIMEOUT_ID: "CAROUSEL_TIMEOUT_ID",
+        CAROUSEL_TIMEOUT_VALUE: 5 // in seconds
+    },
+
+    properties: {
+        nbViewBefore: 0,
+        nbViewAfter: 0,
+        direction: ({parent}) => parent.direction, // eslint-disable-line @dana/no-parent-on-top-level
+        timerManager: {class: $TimerManager},
+        interactiveArrow: false
+    },
+
+    children: {
+        contentDescriptionView: {
+            class: $HighlightContentDescriptionView
+        },
+        dotsView: {
+            class: $DotsListView
+        }
+    },
+
+    methods: /** @lends HighlightRailItemView.prototype */ {
+
+        //////////////////
+        // INPUTS
+        //////////////////
+
+        /**
+         * @override
+         */
+        left: function (key) {
+            this.resetCarousel();
+            this.__checkFirstListIndex();
+            this.previous();
+        },
+
+        /**
+         * @override
+         */
+        right: function (key) {
+            this.resetCarousel();
+            this.__checkLastListIndex();
+            this.next();
+        },
+
+        up: function (key) {
+            return false;
+        },
+
+        /**
+         * @override
+         */
+        down: function (key) {
+            return false;
+        },
+
+        _setData: function (data, options = {}) {
+            this.list.setData(data);
+            if (data && data.length > 1) {
+                this.dotsView.setData(data, {index: this.list.index});
+            } else {
+                this.dotsView.setData([]);
+            }
+            this._updateContent();
+            this.startCarousel();
+        },
+
+        _updateContent: function () {
+            const data = this.list.data[this.list.index];
+
+            this.contentDescriptionView.setData(data);
+            this.dotsView.selectItem(this.list.index);
+        },
+
+        next: function () {
+            this.list.index++;
+            this._updateContent();
+        },
+
+        previous: function () {
+            this.list.index--;
+            this._updateContent();
+        },
+
+        /**
+         * @override
+         */
+        hide: function () {
+            this.stopCarousel();
+        },
+
+        stopCarousel: function () {
+            this.timerManager.clearInterval(this.statics.CAROUSEL_TIMEOUT_ID);
+        },
+
+        startCarousel: function () {
+            if (this.list.data.length > 1) {
+                this.timerManager.setInterval(() => {
+                    this.__checkLastListIndex();
+                    this.next();
+                }, this.statics.CAROUSEL_TIMEOUT_VALUE * $DateUtils.ONE_SECOND, this.statics.CAROUSEL_TIMEOUT_ID);
+            } else {
+                this.timerManager.clearInterval(this.statics.CAROUSEL_TIMEOUT_ID);
+            }
+        },
+
+        resetCarousel: function () {
+            this.stopCarousel();
+            this.startCarousel();
+        },
+
+        //////////////////
+        // FOCUS
+        //////////////////
+
+        _getChildToFocus: function () {
+            return this.contentDescriptionView;
+        },
+
+        //////////////////
+        // PRIVATE
+        //////////////////
+        __checkLastListIndex: function () {
+            if (this.list.index === this.list.data.length - 1) {
+                this.list.index = -1;
+            }
+        },
+
+        __checkFirstListIndex: function () {
+            if (this.list.index === 0) {
+                this.list.index = this.list.data.length;
+            }
+        },
+    },
+
+    transitions: {
+        default: {
+            scale: {
+                duration: 250,
+                easing: $Easing.linear
+            }
+        },
+        focused: {
+            scale: {
+                duration: 250,
+                easing: $Easing.linear
+            }
+        }
+    },
+
+    style: {
+        contentDescriptionView: {
+            y: ({parent, height}) => (parent.height - height) / 2,
+            opacity: 1
+        },
+        dotsView: {
+            y: ({parent, height}) => parent.height - height - 20,
+            x: ({parent, width}) => (parent.width - width) / 2,
+            opacity: 1
+        }
+    }
+});

package/modules/menu/package.json

@@ -1,4 +1,5 @@
 {
     "name": "menu",
-    "description": "App main menu"
-}
+    "description": "App main menu",
+    "version": "1.0.0"
+}

package/modules/menu/scripts/MenuModule.js

@@ -1,5 +1,5 @@
 import $AbstractModule from "@AbstractModule";
-import $VodRoutes from "@MenuRoutes";
+import $MenuRoutes from "@MenuRoutes";
 
 /**
  * Program info page module

package/modules/menu/scripts/ui/views/MenuButtonView.js

@@ -2,7 +2,6 @@ import $MRecyclingItem from "@MRecyclingItem";
 import $View from "@View";
 // PRIMITIVE
 import $RectanglePrimitive from "@RectanglePrimitive";
-import $ContainImagePrimitive from "@ContainImagePrimitive";
 import $TextPrimitive from "@TextPrimitive";
 // CONST
 import $Theme from "@Theme";
@@ -17,6 +16,10 @@ import $TextAlign from "@TextAlign";
 
 export default $View.declare("MenuButtonView", {
     traits: [$MRecyclingItem],
+    statics: /** @lends MenuButtonView */ {
+        MENU_BUTTON_MARGIN_TOP: 55,
+        MENU_BUTTON_HEIGHT: 40
+    },
 
     children: /** @lends MenuButtonView.prototype */ {
         button: {
@@ -47,52 +50,50 @@ export default $View.declare("MenuButtonView", {
 
     states: {
         focused: {
-            "focusBar.fillColor": $Theme.COLOR_ACCENT
+            "focusBar.fillColor": $Theme.COLOR_TEXT,
+            "text.color": $Theme.COLOR_TEXT,
+            "iconText.color": $Theme.COLOR_TEXT
         }
     },
 
     style: /** @lends ButtonView.prototype */ {
-        width: ({ iconText, text }) => text === "" ? iconText.width : (iconText.width + text.width) + 3,
-        height: 40,
-        x: 50,
-        y: 55,
+        width: ({iconText, text}) => text === "" ? iconText.width : (iconText.width + text.width) + 3,
+        height: ({statics}) => statics.MENU_BUTTON_HEIGHT,
 
         button: {
-            margin: 10,
+            margin: 6,
             fillColor: $Theme.COLOR_BACKGROUND_LIGHT,
-            width: ({ parent }) => parent.width,
-            height: ({ parent }) => parent.height - 10
+            width: ({parent}) => parent.width,
+            height: ({parent}) => parent.height - 10
         },
 
         focusBar: {
             fillColor: $Theme.COLOR_BACKGROUND_LIGHT,
-            width: ({ parent }) => parent.text ? parent.text.width +3 + parent.iconText.width: parent.iconText.width,
-            y: ({ parent }) => parent.y - 20,
+            width: ({parent}) =>parent.width,
+            y: ({parent}) => parent.statics.MENU_BUTTON_MARGIN_TOP - 20,
             height: 6,
             borderRadius: 12
         },
 
         text: {
-            color: $Theme.COLOR_TEXT,
+            color: $Theme.COLOR_MUTED,
             height: 24,
             lineHeight: 24,
             x: ({parent}) => parent.iconText.width + 3,
-            y: ({ parent }) => parent.y - 50,
+            y: ({parent}) => parent.statics.MENU_BUTTON_MARGIN_TOP - 50,
             family: $Theme.RobotoBold,
             // eslint-disable-next-line @dana/no-use-width-height-auto
             isAuto_width: true
         },
 
         iconText: {
-            color: $Theme.COLOR_TEXT,
+            color: $Theme.COLOR_MUTED,
             align: $TextAlign.CENTER,
             size: 20,
-            x: 0,
-            y: ({ parent }) => parent.y - 50,
+            y: ({parent}) => parent.statics.MENU_BUTTON_MARGIN_TOP - 50,
             height: 24,
             width: 24,
-            family: $Theme.icons
-
+            family: $Theme.MockIcons
         }
     }
 });

package/modules/menu/scripts/ui/views/MenuView.js

@@ -17,13 +17,19 @@ import menuMock from "menuMock.json!";
 
 export default $View.declare("MenuView", {
     traits: [$MRecyclingItem],
+    statics: /** @lends MenuView */ {
+        MENU_CONTAINER_WIDTH: 343,
+        MENU_CONTAINER_HEIGHT: 60,
+        GAP_BETWEEN_BUTTON: 10,
+        BUTTON_LIST_HEIGHT: 36
+    },
     children: /** @lends MenuView.prototype */ {
         menuContainer: {
             class: $RectanglePrimitive
         },
         profileImage: {
             class: $ContainImagePrimitive,
-            url: "/images/profile.png"
+            url: ({theme}) => theme.getImageUrl("profile")
         },
         buttonList: {
             class: $MenuListView
@@ -56,30 +62,26 @@ export default $View.declare("MenuView", {
 
     style: /** @lends MenuView.prototype */ {
         width: $Theme.FULL_SCREEN_WIDTH / 5,
-        height: $Theme.FULL_SCREEN_HEIGHT,
-        x: 0,
-        y: 50,
+        height: ({statics}) => statics.MENU_CONTAINER_HEIGHT,
 
         menuContainer: {
             fillColor: $Theme.COLOR_BACKGROUND_LIGHT,
-            width: ({ parent }) => parent.width,
-            x: 0,
-            y: ({ parent }) => parent.y,
-            height: 50,
+            width: ({parent}) => parent.statics.MENU_CONTAINER_WIDTH,
+            height: ({parent}) => parent.statics.MENU_CONTAINER_HEIGHT,
             borderRadius: 25
         },
 
         profileImage: {
-            x: ({ parent }) => parent.x - 50,
-            y: ({ parent }) => parent.y,
             width: 55,
-            height: 50,
+            height: 60,
             size: 50,
             borderRadius: 25
         },
 
         buttonList: {
-            x: ({ parent }) => parent.x * 1.4
+            x: ({parent}) => parent.statics.GAP_BETWEEN_BUTTON + parent.profileImage.width,
+            height: ({parent}) => parent.statics.BUTTON_LIST_HEIGHT,
+            y: ({parent, height}) => Math.floor((parent.height - height) / 2)
         }
     }
 });

package/modules/player/scripts/ui/views/PlayerControlButtonView.js

@@ -55,7 +55,7 @@ export default $View.declare("PlayerControlButtonView", {
             x: ({parent}) => (parent.statics.BUTTON_WIDTH - parent.statics.FONT_SIZE) / 2,
             y: ({parent}) => (parent.statics.BUTTON_HEIGHT - parent.statics.FONT_SIZE) / 2,
             align: $TextAlign.CENTER,
-            family: $Theme.icons,
+            family: $Theme.MockIcons,
             color: $Theme.COLOR_BACKGROUND,
             size: ({parent}) => parent.statics.FONT_SIZE
         }

package/modules/search/package.json

@@ -1,4 +1,5 @@
 {
     "name": "search",
-    "description": ""
-}
+    "description": "displays the search features",
+    "version": "1.0.0"
+}

package/modules/search/scripts/ui/views/keyboard/SearchKeyboardRowItemView.js

@@ -87,7 +87,7 @@ export default $AbstractKeyboardRowItemView.declare("SearchKeyboardRowItemView",
             width: ({ parent }) => parent.width,
             size: ({ parent }) => ((parent.data && parent.data.ratio) || 1) * 10,
             align: $TextAlign.CENTER,
-            family: $Theme.icons,
+            family: $Theme.MockIcons,
             color: $Theme.COLOR_TEXT,
         },
     },

package/modules/vod/package.json

@@ -1,4 +1,5 @@
 {
     "name": "vod",
-    "description": "VOD module"
-}
+    "description": "VOD module",
+    "version": "1.0.0"
+}

package/modules/vod/scripts/ui/screens/VodScreen.js

@@ -18,6 +18,14 @@ import menuMock from "menuMock.json!";
  * @screen
  */
 export default $AppScreen.declare("VodScreen", {
+    statics: /** @lends VodScreen */ {
+        MARGIN_TOP: 60,
+        MARGIN_LEFT: 108,
+        LOGO_WIDTH: 183,
+        LOGO_HEIGHT: 60,
+        LOGO_X: 1642,
+        MENU_SCROLL_GAP: 100
+    },
     children: /** @lends VodScreen.prototype */ {
         background: { class: $RectanglePrimitive },
         logo: {
@@ -132,7 +140,9 @@ export default $AppScreen.declare("VodScreen", {
         ok: function (key) {
             if (this.focusedChild === this.menu) {
                 const route = this.menu.buttonList.dataItem.route;
-                return this.route(route);
+                if (route !== "vod") {
+                    return this.route(route);
+                }
             }
             if (this.focusedChild === this.scrollView) {
                 this.data.scrollIndex = this.focusedChild.index
@@ -183,21 +193,22 @@ export default $AppScreen.declare("VodScreen", {
         background: {
             width: $Theme.FULL_SCREEN_WIDTH,
             height: $Theme.FULL_SCREEN_HEIGHT,
-            fillColor: $Theme.COLOR_BACKGROUND,
+            fillColor: $Theme.COLOR_BACKGROUND
         },
         menu: {
-            x: 50,
-            y: 50,
+            x: ({parent}) => parent.statics.MARGIN_LEFT,
+            y: ({parent}) => parent.statics.MARGIN_TOP,
+            height: ({parent}) => parent.statics.MARGIN_TOP
         },
         logo: {
-            width: 323,
-            height: 120,
-            x: ({ width }) => $Theme.FULL_SCREEN_WIDTH - width - 50,
-            y: 15,
+            width: ({parent}) => parent.statics.LOGO_WIDTH,
+            height: ({parent}) => parent.statics.LOGO_HEIGHT,
+            x: ({parent}) => parent.statics.LOGO_X,
+            y: ({parent}) => parent.statics.MARGIN_TOP
         },
         scrollView: {
-            x: 50,
-            y: 250,
-        },
-    },
+            x: ({parent}) => parent.statics.MARGIN_LEFT,
+            y: ({parent}) => parent.menu.y + parent.menu.height + parent.statics.MENU_SCROLL_GAP
+        }
+    }
 });

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@wiztivi/dana-templates",
-    "version": "0.0.16",
+    "version": "0.0.18",
     "description": "Dana templates used by CLI",
     "exports": "./index.ts",
     "type": "module",

package/tutorial/modules/fip/scripts/ui/views/PlayButtonView.js

@@ -1,5 +1,4 @@
-// eslint-disable-next-line @dana/no-import-rendered-view
-import $RenderedView from "@RenderedView";
+import $View from "@View";
 import $TextPrimitive from "@TextPrimitive";
 import $RectanglePrimitive from "@RectanglePrimitive";
 import $Theme from "@Theme";
@@ -9,9 +8,9 @@ import $Theme from "@Theme";
  *
  * @name PlayButtonView
  * @class
- * @extends RenderedView
+ * @extends View
  */
-export default $RenderedView.declare("PlayButtonView", {
+export default $View.declare("PlayButtonView", {
     statics: /** @lends PlayButtonView */ {
         MARGIN: 20,
         COLOR_BLACK_0_8: "#00000080"