The ScienceMakers Digital Video Archive website is a web-based single page application (SPA) built with Angular, TypeScript, and Bootstrap for responsive layout.
Run npm install in the root of the project directory to install the necessary build tools and depedencies.
There must be an env.json file in the assets folder with a value identifying which configuration to use. The value of the "myEnv" key, e.g., "production", indicates there must be a config.production.json file also in assets. This file is NOT part of the repository, as you must specify your own API to the Azure Services feeding this interface, and your own media files URL base string. The file config.production.json will have content like the following: { "serviceBase" : "https://YourDomainAndPathForAPIServiceHere/", "mediaBase" : "https://YourDomainAndPathForMediaFilesHere/" }
You may have a config.development.json with different values, and set env.json differently between development and production builds.
Please note that with the addition of the authentication framework, the number of possible build options has changed. This number may go down again in the future once authentication goes into production.
Build is handled by Angular CLI, for more information see: https://cli.angular.io/
Run ng serve to run the application locally during development.
Optionally, run ng serve --hmr -e=hmr (or simply npm run hmr) to run the application locally with Hot Module Replacement during development.
To debug with authentication enabled: ng serve --env=devauth
Set env.json to production as needed. Add in correct Google Analytics key to index.html as needed.
Run 'ng build --env=prod --target=production' to build locally. Deploy outside of the gitHub framework as necessary.
We actively test the latest versions of the following browsers:
- Safari
- Chrome
- Chrome
- Firefox
- Safari
- Chrome
- Edge
- IE
We primarily develop using Chrome. As a result, we feel it is the browser we best support and is our recommendation for the best user experience.
- There may be minor issues with image scaling in Microsoft Edge and Microsoft Internet Explorer as they do not support the CSS
object-fitproperty. - The Renderer.invokeElementMethod is deprecated with no current replacement. This method is used to scroll the selected search result into view when returning from the details view.
- The video player currently has accessibility issues. We are working with the owners of Videogular2 to resolve this issue, and will hopefully have it resolved soon.
Font sizing has been implemented using rems and ems. For more information see: https://css-tricks.com/rems-ems/.
- Angular - Web application framework
- Angular CLI - A command line interface for Angular
- angular-hmr - Angular Hot Module Replacement. Used in development when running
ng serve --hmr -e=hmr. - ngx-bootstrap - An Angular 2 version of the popular UI library. Only the Tooltip module is imported into this project.
- ngx-clipboard - A clipboard copy directive used to copy My Playlist url.
- ng2-dragula - A drag and drop library used to rearrange stories in My Playlist.
- ngx-scroll-to - A scrolling library that addresses in-page hash linking with Angular routing. Used for the back-to-top and skip-to-main links.
- Videogular2 - An HTML5 video player for Angular 2.