Barry

Project barry is a super secret Tourism Events Queensland Competition. The comp is a "reskin" of summer feels 2017.

Local Development Build Setup

# install dependencies
$ npm install

# serve with hot reload at localhost:3000
$ npm run dev

# generate static project
$ npm run generate

For detailed explanation on how things work, checkout Nuxt.js docs.

Deploy

# Install package-lock.json
npm ci

# Lint with prettier/eslint
npm run lint

# Test with jest
npm run test

# Build static files into /dist
npm run generate

# Copy /dist to file server
# ???
# Profit

Hero Video

Use ffmpeg to generate video files with mime type application/x-mpegURL used for hls live streaming the video in chunks.

ffmpeg -i input.mp4 -profile:v baseline -level 3.0 -s 640x360 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls index.m3u8

ffmpeg -i "Salty Wings - Summersite - Whitehaven Couple Wide Qld endframe V3.mp4" -profile:v baseline -level 3.0 -s 640x360 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls index.m3u8

ffmpeg -i "48 Website_1.mp4" -vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls index.m3u8

ffmpeg -i "48 Hero 9-16_1.mp4" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls about_mobile.m3u8

ffmpeg -i "6sec Bumper 9-16_1.mp4" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls win_mobile.m3u8

ffmpeg -i "6sec Bumper_1.mp4" -vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" -c:a aac -ar 48000 -b:a 128k -c:v h264 -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 10 -hls_list_size 0 -f hls win.m3u8

ffmpeg -i "6sec Bumper_1.mp4" -framerate 30 -profile:v baseline -level 3.0 -start_number 0 -hls_time 6 -hls_list_size 0 -f hls win.m3u8

ffmpeg -i "48 Website_1.mp4" -framerate 30 -profile:v baseline -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls index.m3u8

video change on first and 9th of june. remove win a scuber ta on hero on 1st copy change in meet scuber remove enter now scuber remove request tile on 19th of june 3rd of june winners offers 30th of june

ffmpeg -hide_banner -y -i "6sec Bumper_1.mp4" \
  -vf scale=w=640:h=360:force_original_aspect_ratio=decrease -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod  -b:v 800k -maxrate 856k -bufsize 1200k -b:a 96k -hls_segment_filename win/360p_%03d.ts win/360p.m3u8 \
  -vf scale=w=842:h=480:force_original_aspect_ratio=decrease -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 1400k -maxrate 1498k -bufsize 2100k -b:a 128k -hls_segment_filename win/480p_%03d.ts win/480p.m3u8 \
  -vf scale=w=1280:h=720:force_original_aspect_ratio=decrease -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 2800k -maxrate 2996k -bufsize 4200k -b:a 128k -hls_segment_filename win/720p_%03d.ts win/720p.m3u8 \
  -vf scale=w=1920:h=1080:force_original_aspect_ratio=decrease -c:a aac -ar 48000 -c:v h264 -profile:v main -crf 20 -sc_threshold 0 -g 48 -keyint_min 48 -hls_time 4 -hls_playlist_type vod -b:v 5000k -maxrate 5350k -bufsize 7500k -b:a 192k -hls_segment_filename win/1080p_%03d.ts win/1080p.m3u8

Close videos

ffmpeg -i "15secHighlights_16x9_1.mp4" -vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls index.m3u8

ffmpeg -i "15secHighlights_9x16_1.mp4" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls about_mobile.m3u8

French

ffmpeg -i "15secHighlights_16x9_1.mp4" -vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls index_fr.m3u8

ffmpeg -i "15secHighlights_9x16_1.mp4" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls about_mobile_fr.m3u8

Final videos

ffmpeg -i "ScUber 16-9 no sound_1.mp4" -vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls index.m3u8

ffmpeg -i "ScUber 9-16 no sound_1.mp4" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls about_mobile.m3u8

French

ffmpeg -i "ScUber 16-9 no sound_1.mp4" -vf "scale=w=1280:h=720:force_original_aspect_ratio=decrease" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls index_fr.m3u8

ffmpeg -i "ScUber 9-16 no sound_1.mp4" -profile:v main -crf 20 -g 48 -keyint_min 48 -sc_threshold 0 -b:v 2500k -maxrate 2675k -bufsize 3750k -level 3.0 -start_number 0 -hls_time 4 -hls_list_size 0 -f hls about_mobile_fr.m3u8

Dependencies

Dependencies:

• Nuxt: Static site generator
• Vue: JavaScript Framework
• Ajv: Another JSON Schema Validator
• Vuex: State Management Pattern
• Axios: Promise based HTTP client
• Dotenv: loads environment variables from a .env file into process.env
• NuxtPWA: Progressive Web Apps (PWA)
• Bootstrap: Front-end component library
• vue-i18n: Internationalization
• video.js: Video Player Framework
• jQuery: Scroll animations, would like to remove and make all animaitons vanilla
• FontAwesome: Vector icons and social logos
• VAC (vue-awesome-countdown): Countdown plug-in with high performance and high accuracy for Vue 2.5.0+.

Dev Dependencies:

• Jest: JavaScript Testing Framework
• eslint: JavaScript Linting (airbnb style)
• prettier: Code formatter
• sass-loader: Compiles Sass to CSS (theming bootstrap)

Need to add:

• Google Analytics: Vue plugin for Google Analytics
• Google Tag Manager: Google Tag Manager (GTM)
• Datepicker: A datepicker Vue component

Would like to Add:

• Sentry: Open-source error tracking (selfhosted?)
• Percy: Your all-in-one visual review platform
• Pingdom: Website Performance Monitoring

Things to fix:

• Remove FontAwesome
• Remove AJV use Browser validation API instead

Features

• Internationalization
• Form validation schema
• HLS hero video banner
• Static site generation
• Progressive Web App (PWA)
• Unit tests with Jest (if I write some...)
• SCSS custom theming for Bootstrap
• Coming soon Countdown

Usage

Page data is kept in three locations:

• /assets/json
• /locales
• /static

The locales folder is where page content is store for internationalization all page text content should be loaded from here if it needs to be internationalized. The json assets is for storing files that do not need to be internationalized like the form validation schema. Static assets like the favicon are stored in /static folder.