Move source code from github into gitea

master
Patrik Janosdeak 3 years ago
parent c8586ab99a
commit e5a6e291bc

Binary file not shown.

Binary file not shown.

After

Width:  |  Height:  |  Size: 1011 KiB

@ -0,0 +1,34 @@
<!DOCTYPE html>
<html lang="cs">
<head>
<title>Video example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<link rel="stylesheet" href="style.scss">
</head>
<body>
<main>
<article class="jackpot"></article>
<div class="blue"></div>
<div class="dealer-wrapper">
<div class="dealer" contenteditable="true">
<article class="dealer-name"></article>
<article class="dealer-address"></article>
<article class="dealer-city"></article>
<article class="dealer-phone"></article>
<article class="dealer-url"></article>
<article class="dealer-logo"></article>
</div>
</div>
</main>
<script src="https://cdn.nebe.app/store/utils/dist/gsap/3.3.3/gsap.min.js"></script>
<script src="https://cdn.nebe.app/store/utils/dist/gsap/3.3.3/GSDevTools.min.js"></script>
<script src="https://cdn.nebe.app/store/utils/dist/gsap/3.3.3/SplitText.min.js"></script>
<script src="https://cdn.nebe.app/store/utils/dist/video-helper.min.js"></script>
<script src="script.js"></script>
</body>
</html>

@ -0,0 +1,96 @@
import audioFile from './audio.mp3';
import videoFile from './video.mp4';
window.RENDER = {
duration: 21.42,
audio_layers: [
{ start: 0, file: audioFile.toString() }
],
video_layers: [
{ start: 0, file: videoFile.toString() }
],
render_parts: [
{ start: 4.5, end: 6.25 }, // Jackpot animation
{ start: 17.5, end: 20.5 }, // Dealer animation
]
};
window.FILL = async (inputs) => {
// Fill jackpot
const jackpotRaw = String(inputs.jackpot);
const jackpotDigits = jackpotRaw.replace(/\D+/g, '');
const jackpotPadded = '00000000' + jackpotDigits;
const jackpot = jackpotPadded.substr(jackpotPadded.length - 8);
let jackpotHTML = '';
for (let i = 0; i < 8; i++) {
jackpotHTML += `<div class="digit digit${i}">${jackpot[i]}</div>`;
}
const jackpotEl = document.querySelector('article.jackpot');
jackpotEl.innerHTML = jackpotHTML;
// Fill dealer info
const nameEl = document.querySelector('.dealer-name');
nameEl.innerHTML = `${inputs.name||''}`;
const addressEl = document.querySelector('.dealer-address');
addressEl.innerHTML = `${inputs.address||''}`;
const cityEl = document.querySelector('.dealer-city');
cityEl.innerHTML = `${inputs.postal_code||''} ${inputs.city||''}`;
const phoneEl = document.querySelector('.dealer-phone');
phoneEl.innerHTML = `${inputs.phone||''}`;
const urlEl = document.querySelector('.dealer-url');
urlEl.innerHTML = `${inputs.url||''}`;
const logoEl = document.querySelector('.dealer-logo');
logoEl.innerHTML = `<img src="${inputs.logo_horizontal||inputs.logo_vertical||''}" alt="">`;
// Jackpot animation
const digitClasses = ['.digit6', '.digit2', '.digit3', '.digit7', '.digit1', '.digit5', '.digit0', '.digit4'];
const digitEls = digitClasses.map((className) => {
return document.querySelector(className);
});
console.log(digitEls);
console.log(jackpotEl);
window.TIMELINE
.fromTo(jackpotEl, 2, {scale: 1.05}, {scale: 1}, 4.5)
.staggerFromTo(digitEls, .2, {opacity: 0}, {opacity: 1}, 0.1, 4.73)
.set(digitEls, {opacity: 0}, 6.24);
// Dealer info animations
function shuffle(a) {
for (let i = a.length - 1; i > 0; i--) {
const j = Math.floor(Math.random() * (i + 1));
[a[i], a[j]] = [a[j], a[i]];
}
return a;
}
const nameSplitText = new SplitText([nameEl, addressEl, cityEl, phoneEl, urlEl], {type: 'chars'});
const shuffledChars = shuffle(nameSplitText.chars);
console.log(shuffledChars);
console.log(logoEl);
const blueEl = document.querySelector('.blue');
console.log(blueEl);
window.TIMELINE
.set(nameSplitText.chars, {opacity: 0}, 0)
.set(logoEl, {opacity: 0}, 0)
.fromTo(blueEl, 0.11, {opacity: 0}, {opacity: 1}, 17.54)
.staggerFromTo(shuffledChars, .2, {opacity: 0, scale: 1.2, y: 10}, {opacity: 1, scale: 1, y: 0}, 0.01, 17.6)
.fromTo(logoEl, .2, {opacity: 0}, {opacity: 1}, 18)
.staggerTo(shuffledChars, .2, {opacity: 0, scale: 0.8, y: -10}, 0.01, 19.5)
.to(logoEl, .2, {opacity: 0}, 19.5)
.to(blueEl, 0.05, {opacity: 0}, 20.44);
};

@ -0,0 +1,138 @@
$width: 1920px;
$height: 1080px;
@font-face {
font-family: "Calling Code";
font-weight: 700;
src: url('../assets/callingcode-bold.otf');
}
@font-face {
font-family: "Calling Code";
font-weight: 400;
src: url('../assets/callingcode-regular.otf');
}
@font-face {
font-family: DINPro;
font-weight: 900;
src: url('../assets/DINPro-Black.otf');
}
@font-face {
font-family: DINPro;
font-weight: 700;
src: url('../assets/DINPro-Bold.ttf');
}
@font-face {
font-family: DINPro;
font-weight: 400;
src: url('../assets/DINPro-Regular.ttf');
}
@font-face {
font-family: DINPro;
font-weight: 300;
src: url('../assets/DINPro-Light.ttf');
}
*,
*:before,
*:after {
box-sizing: border-box;
}
body {
padding: 0 0 100px 0;
margin: 0;
font-family: DINPro, sans-serif;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
main {
position: relative;
width: $width;
height: $height;
overflow: hidden;
background: transparent;
}
.jackpot, .jackpot div, .blue, .dealer, .dealer article, .dealer img {
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
transform: translateZ(0);
will-change: transform;
}
.jackpot {
position: absolute;
top: 550px;
left: 825px;
height: 55px;
//outline: 1px solid red;
width: 435px;
text-align: center;
div {
text-align: center;
display: inline-block;
font-size: 61px;
line-height: 75px;
width: 42.5px;
margin: 0 5px 0 5px;
font-weight: 900;
background: #6CE9B0;
color: #000;
opacity: 0;
border-radius: 10px;
}
}
.blue {
position: absolute;
left: 0;
top: 0;
width: $width;
height: $height;
background: url("blue.jpg");
opacity: 0;
pointer-events: none;
}
.dealer-wrapper {
position: absolute;
top: 200px;
width: $width;
text-align: center;
height: 800px;
}
.dealer {
//outline: 1px solid red;
padding-left: 100px;
padding-right: 100px;
width: auto;
margin: 0 auto;
display: inline-block;
text-align: left;
font-size: 90px;
font-weight: 700;
color: #7E2ECB;
font-family: "Calling Code", sans-serif;
article {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
img {
width: 300px;
height: 200px;
object-fit: contain;
object-position: left center;
}
}

Binary file not shown.

@ -1,2 +1,34 @@
# video # Ukázková šablona pro video kreativy
Ffmpeg helpers:
```
Install ffmpeg
brew install ffmpeg
Get info
ffprobe video.mp4
Get length of video
ffprobe -v error -show_entries format=duration -of default=noprint_wrappers=1:nokey=1 video.mp4
Convert from mov to mp4
ffmpeg -i input.mov output.mp4
Convert to webm format
ffmpeg -i input.mov -f webm -c:v libvpx -b:v 2M -acodec libvorbis -auto-alt-ref 0 out3.webm -hide_banner
ffmpeg -i input.mov -c:v libvpx-vp9 -b:v 2M -pix_fmt yuva420p out4.webm
Extract part of video
ffmpeg -ss 53.8 -i video.mp4 -t 21.122667 -c copy output.mp4
Extract audio from video
ffmpeg -i video.mp4 -vn audio.mp3
ffmpeg -i video.mp4 -vn -acodec copy audio.mp3
Extract video without audio
ffmpeg -i video.mp4 -c copy -an video-noaudio.mp4
Volume up audio
ffmpeg -y -i jingle.wav -filter_complex "[0:0]volume=2.0[out]" -map "[out]" jingle20.wav
```

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

Binary file not shown.

@ -0,0 +1,9 @@
{
"name": "Demo Video",
"description": "Nastavitelný jackpot a adresa",
"tags": [
"Template",
"Demo"
],
"format": "video"
}

@ -0,0 +1,41 @@
{
"jackpot": {
"label": "Ukázkový jackpot",
"value": "96457823"
},
"name": {
"label": "Název pobočky",
"value": "Mánes a syn"
},
"address": {
"label": "Adresa",
"value": "Mánesova 625"
},
"postal_code": {
"label": "PSČ",
"value": "123 45"
},
"city": {
"label": "Město",
"value": "Benešov"
},
"phone": {
"label": "Telefon",
"value": "Tel.: 789 456 123"
},
"url": {
"label": "Webová adresa",
"value": "www.manes-a-syn.cz",
"type": "url"
},
"logo_horizontal": {
"label": "Horizontální logo",
"value": "https://cdn.nebe.app/demo/products/cross.svg",
"type": "image"
},
"logo_vertical": {
"label": "Vertikální logo",
"value": "https://cdn.nebe.app/demo/products/cross.svg",
"type": "image"
}
}
Loading…
Cancel
Save