async function setupWebProjects()

in provider-utils/awscloudformation/utils/video-player.js [108:175]


async function setupWebProjects(context, resourceName) {
  const { amplify } = context;
  const amplifyMeta = amplify.getProjectMeta();
  const { serviceType, output } = amplifyMeta.video[resourceName];
  const { framework, config } = videoPlayerUtils
    .getProjectConfig(context)[videoPlayerUtils.getProjectConfig(context).frontend];
  const projectRootPath = amplify.pathManager.searchProjectRootPath();
  const props = {
    framework,
    channelLatency: null,
  };

  if (serviceType === 'ivs') {
    const indexPath = videoPlayerUtils.getProjectIndexHTMLPath(context);
    const { channelLatency } = amplify.readJsonFile(`${amplify.pathManager.getBackendDirPath()}/video/${resourceName}/props.json`).channel;

    props.channelLatency = channelLatency;
    context.print.info('Adding Amazon Interactive Video Service (IVS) Player for Web...');
    if (!videoPlayerUtils.includesHTML(indexPath, 'body', 'amazon-ivs-videojs-tech.min.js')) {
      videoPlayerUtils.insertAdjacentHTML(indexPath, 'body', 'beforeend', '<script src="https://player.live-video.net/1.3.1/amazon-ivs-videojs-tech.min.js"></script>');
    }
  }
  const videoTemplate = fs.readFileSync(`${__dirname}/../video-player-templates/web/video-player.ejs`, { encoding: 'utf-8' });
  const appendVideoTemplate = ejs.render(videoTemplate, props);
  const videoComponentTemplate = fs.readFileSync(`${__dirname}/../video-player-templates/web/${framework}-video-component.ejs`, { encoding: 'utf-8' });
  props.src = videoPlayerUtils.getServiceUrl({ serviceType, output });

  const appendVideoComponentTemplate = ejs.render(videoComponentTemplate, props);

  switch (framework) {
    case 'angular':
      fs.mkdirSync(`${projectRootPath}/${config.SourceDir}/app/video-player`, { recursive: true });
      fs.copyFileSync(`${__dirname}/../video-player-templates/web/video-player.component.scss`,
        `${projectRootPath}/${config.SourceDir}/app/video-player/video-player.component.scss`);
      fs.writeFileSync(`${projectRootPath}/${config.SourceDir}/app/video-player/video-player.component.${videoPlayerUtils.fileExtension(framework)}`, appendVideoTemplate);
      context.print.info("Don't forget to add the component to your angular module");
      break;
    case 'vue':
      fs.writeFileSync(`${projectRootPath}/${config.SourceDir}/components/VideoPlayer.${videoPlayerUtils.fileExtension(framework)}`, appendVideoTemplate);
      break;
    case 'ember':
      fs.writeFileSync(`${projectRootPath}/${config.SourceDir}/app/components/video-player.${videoPlayerUtils.fileExtension(framework)}`, appendVideoTemplate);
      break;
    case 'none':
      break;
    default:
      fs.writeFileSync(`${projectRootPath}/${config.SourceDir}/VideoPlayer.${videoPlayerUtils.fileExtension(framework)}`, appendVideoTemplate);
      break;
  }

  if (framework !== 'none') {
    const spinner = ora('Checking package.json dependencies...');
    spinner.start();
    if (!videoPlayerUtils.checkNpmDependencies(context, 'video.js')) {
      spinner.text = 'Adding video.js to package.json...';
      await exec('npm', ['install', 'video.js'], false);
    }
    spinner.succeed('Configuration complete.');
    context.print.blue(chalk`{underline Import and add the following ${framework} component:}`);
  } else {
    context.print.blue(chalk`{underline Copy and paste the following snippet of code:}`);
  }
  context.print.info(appendVideoComponentTemplate);
  if (framework === 'ember') {
    context.print.blue(chalk`{underline Add the following statement in your ember-cli-build.js:}`);
    context.print.info("app.import('node_modules/video.js/dist/video-js.css');");
  }
}