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');");
}
}