173: Added slide preview

Author: tuj

src/app.js

@@ -61,8 +61,6 @@ function App({ preview, previewId }) {
   function screenHandler(event) {
     const screenData = event.detail?.screen;
 
-    console.log('screenData', screenData);
-
     if (screenData !== null) {
       setScreen(screenData);
     }

src/data-sync/pull-strategy.js

@@ -413,31 +413,36 @@ class PullStrategy {
     return this.apiHelper.getPath(id);
   }
 
-  async addTemplateData(slide) {
+  async getTemplateData(slide) {
     return new Promise((resolve, reject) => {
-      const newSlide = cloneDeep(slide);
-      const templatePath = newSlide.templateInfo['@id'];
+      const templatePath = slide.templateInfo['@id'];
 
-      this.apiHelper.getPath(templatePath).then((templateData) => {
-        resolve(templateData);
+      this.apiHelper.getPath(templatePath).then((data) => {
+        resolve(data);
       });
     });
   }
 
-  async addFeedData(slide) {
+  async getFeedData(slide) {
     return new Promise((resolve, reject) => {
-      const newSlide = cloneDeep(slide);
-
-      if (!newSlide?.feed?.feedUrl) {
+      if (!slide?.feed?.feedUrl) {
         resolve([]);
       } else {
-        this.apiHelper.getPath(newSlide.feed.feedUrl).then((feedData) => {
-          resolve(feedData);
+        this.apiHelper.getPath(slide.feed.feedUrl).then((data) => {
+          resolve(data);
         });
       }
     });
   }
 
+  async getMediaData(media) {
+    return new Promise((resolve, reject) => {
+      this.apiHelper.getPath(media).then((data) => {
+        resolve(data);
+      });
+    });
+  }
+
   /**
    * Start the data synchronization.
    */

src/service/contentService.js

@@ -1,10 +1,16 @@
 import sha256 from 'crypto-js/sha256';
 import Base64 from 'crypto-js/enc-base64';
+import cloneDeep from 'lodash.clonedeep';
+import { object, string } from 'prop-types';
 import Logger from '../logger/logger';
 import DataSync from '../data-sync/data-sync';
 import ScheduleService from './scheduleService';
 import ConfigLoader from '../config-loader';
 import PullStrategy from '../data-sync/pull-strategy';
+import {
+  screenForPlaylistPreview,
+  screenForSlidePreview,
+} from '../util/preview';
 
 /**
  * ContentService.
@@ -197,7 +203,7 @@ class ContentService {
   /**
    * Start preview.
    *
-   * @param event
+   * @param {CustomEvent} event The event.
    */
   async startPreview(event) {
     const data = event.detail;
@@ -206,17 +212,14 @@ class ContentService {
 
     const config = await ConfigLoader.loadConfig();
 
-
     if (mode === 'screen') {
       this.startSyncing(`/v2/screen/${id}`);
     } else if (mode === 'playlist') {
       const pullStrategy = new PullStrategy({
         endpoint: config.apiEndpoint,
       });
 
-      const playlist = await pullStrategy.getPath(
-        `/v2/playlists/${id}`
-      );
+      const playlist = await pullStrategy.getPath(`/v2/playlists/${id}`);
 
       const playlistSlidesResponse = await pullStrategy.getPath(
         playlist.slides
@@ -226,41 +229,13 @@ class ContentService {
         (playlistSlide) => playlistSlide.slide
       );
 
-      for (const item of playlist.slidesData) {
-        item.templateData = await pullStrategy.addTemplateData(item);
+      // eslint-disable-next-line no-restricted-syntax
+      for (const slide of playlist.slidesData) {
+        // eslint-disable-next-line no-await-in-loop
+        await ContentService.attachReferencesToSlide(pullStrategy, slide);
       }
 
-      const screen = {
-        '@id': '/v2/screens/SCREEN01234567890123456789',
-        '@type': 'Screen',
-        title: 'Preview',
-        description: 'Screen for preview.',
-        layout: '/v2/layouts/LAYOUT01234567890123456789',
-        regions: [
-          '/v2/screens/SCREEN01234567890123456789/regions/REGION01234567890123456789/playlists',
-        ],
-        regionData: {
-          REGION01234567890123456789: [playlist],
-        },
-        layoutData: {
-          '@id': '/v2/layouts/LAYOUT01234567890123456789',
-          '@type': 'ScreenLayout',
-          title: 'Full screen',
-          grid: {
-            rows: 1,
-            columns: 1,
-          },
-          regions: [
-            {
-              '@type': 'ScreenLayoutRegions',
-              '@id': '/v2/layouts/regions/REGION01234567890123456789',
-              title: 'full',
-              gridArea: ['a'],
-              screenLayout: '/v2/layouts/LAYOUT01234567890123456789',
-            },
-          ],
-        },
-      };
+      const screen = screenForPlaylistPreview(playlist);
 
       document.dispatchEvent(
         new CustomEvent('content', {
@@ -270,19 +245,47 @@ class ContentService {
         })
       );
     } else if (mode === 'slide') {
-      const pullStrategy = new PullStrategy({});
-      // const slide = pullStrategy.getSlide(id);
+      const pullStrategy = new PullStrategy({
+        endpoint: config.apiEndpoint,
+      });
 
-      const screen = {
-        // TODO: Build fake screen.
-      };
+      const slide = await pullStrategy.getPath(`/v2/slides/${id}`);
 
-      ContentService.emitScreen(screen);
+      // eslint-disable-next-line no-await-in-loop
+      await ContentService.attachReferencesToSlide(pullStrategy, slide);
+
+      const screen = screenForSlidePreview(slide);
+
+      document.dispatchEvent(
+        new CustomEvent('content', {
+          detail: {
+            screen,
+          },
+        })
+      );
     } else {
       Logger.error(`Unsupported preview mode: ${mode}.`);
     }
   }
 
+  static async attachReferencesToSlide(strategy, slide) {
+    /* eslint-disable no-param-reassign */
+    slide.templateData = await strategy.getTemplateData(slide);
+    slide.feedData = await strategy.getFeedData(slide);
+
+    slide.mediaData = {};
+    // eslint-disable-next-line no-restricted-syntax
+    for (const media of slide.media) {
+      // eslint-disable-next-line no-await-in-loop
+      slide.mediaData[media] = await strategy.getMediaData(media);
+    }
+
+    if (typeof slide.theme === 'string' || slide.theme instanceof String) {
+      slide.theme = await strategy.getPath(slide.theme);
+    }
+    /* eslint-enable no-param-reassign */
+  }
+
   /**
    * Emit screen.
    *

src/util/preview.js

@@ -0,0 +1,60 @@
+/**
+ * Create screen data for displaying playlist preview.
+ *
+ * @param {object} playlist Playlist data.
+ * @returns {object} Screen data.
+ */
+function screenForPlaylistPreview(playlist) {
+  return {
+    '@id': '/v2/screens/SCREEN01234567890123456789',
+    '@type': 'Screen',
+    title: 'Preview',
+    description: 'Screen for preview.',
+    layout: '/v2/layouts/LAYOUT01234567890123456789',
+    regions: [
+      '/v2/screens/SCREEN01234567890123456789/regions/REGION01234567890123456789/playlists',
+    ],
+    regionData: {
+      REGION01234567890123456789: [playlist],
+    },
+    layoutData: {
+      '@id': '/v2/layouts/LAYOUT01234567890123456789',
+      '@type': 'ScreenLayout',
+      title: 'Full screen',
+      grid: {
+        rows: 1,
+        columns: 1,
+      },
+      regions: [
+        {
+          '@type': 'ScreenLayoutRegions',
+          '@id': '/v2/layouts/regions/REGION01234567890123456789',
+          title: 'full',
+          gridArea: ['a'],
+          screenLayout: '/v2/layouts/LAYOUT01234567890123456789',
+        },
+      ],
+    },
+  };
+}
+
+/**
+ * Create screen data for displaying slide preview.
+ *
+ * @param {object} slide Slide data.
+ * @returns {object} Screen data.
+ */
+function screenForSlidePreview(slide) {
+  const playlist = {
+    '@id': '/v2/playlists/01HT6WPZCR50W8EF9004PVQ11P',
+    '@type': 'Playlist',
+    title: 'Preview playlist',
+    description: 'Playlist for preview',
+    schedules: [],
+    slides: '/v2/playlists/PLAYLIST12345678901234567/slides',
+    slidesData: [slide],
+  };
+  return screenForPlaylistPreview(playlist);
+}
+
+export { screenForPlaylistPreview, screenForSlidePreview };