janis/obs-twitch-camera-frame
1
0
Fork 0
mirror of https://github.com/DerTyp7/obs-twitch-camera-frame.git synced 2025-10-30 21:27:13 +01:00
Code Issues Packages Projects Releases Wiki Activity

Compare commits

base: janis:v0.0.6
Branches Tags
janis:master
janis:v0.1.4 janis:v0.1.3 janis:v0.1.2 janis:v0.1.1 janis:v0.1.0 janis:v0.0.9 janis:v0.0.8 janis:v0.0.7 janis:v0.0.6 janis:v0.0.5 janis:v0.0.4 janis:v0.0.3 janis:v0.0.2 janis:v0.0.1
..
compare: janis:v0.1.1
Branches Tags
janis:master
janis:v0.1.4 janis:v0.1.3 janis:v0.1.2 janis:v0.1.1 janis:v0.1.0 janis:v0.0.9 janis:v0.0.8 janis:v0.0.7 janis:v0.0.6 janis:v0.0.5 janis:v0.0.4 janis:v0.0.3 janis:v0.0.2 janis:v0.0.1

10 Commits
v0.0.6 ... v0.1.1

Author SHA1 Message Date
Janis
53555aad6a v0.1.1 2022-10-31 13:40:29 +01:00
Janis
a4f9697b6c add config 2022-10-30 15:49:21 +01:00
Janis
c0d72b8e43 remove cfg 2022-10-30 15:48:50 +01:00
Janis
80ea3c297e v0.1.0 2022-10-30 15:09:48 +01:00
Janis
c5e597ef58 added tf banner ;) 2022-10-30 15:09:35 +01:00
Janis
5dd6bbf290 v0.0.9 2022-10-29 17:12:44 +02:00
Janis
a45f99ecd3 v0.0.9 2022-10-29 17:12:10 +02:00
Janis
14079a997e v0.0.8 2022-10-29 16:53:39 +02:00
Janis
23044c320d v0.0.8 2022-10-29 16:53:35 +02:00
Janis
ae6d3f0ebf v0.0.7 2022-10-29 16:51:32 +02:00
13 changed files with 129 additions and 32 deletions
Expand all files Collapse all files

1
.gitignore vendored
View File

@@ -1 +0,0 @@
config.js

1
config.js
View File

@@ -1,3 +1,4 @@
const CONFIG = { const CONFIG = {
apiKey: "", apiKey: "",
twitchOAuth: "",
}; };

33
css/animations.css
View File

@@ -1,13 +1,5 @@
@keyframes subAnimation { @keyframes subAnimation {
0% { 0% {
border-image: linear-gradient(
to top,
var(--border-color-1),
var(--border-color-2)
)
1;
}
10% {
border-image: linear-gradient( border-image: linear-gradient(
to top, to top,
var(--border-color-flash-1), var(--border-color-flash-1),
@@ -23,7 +15,7 @@
) )
1; 1;
} }
80% { 100% {
border-image: linear-gradient( border-image: linear-gradient(
to top, to top,
var(--border-color-flash-1), var(--border-color-flash-1),
@@ -31,14 +23,6 @@
) )
1; 1;
} }
100% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
} }
@keyframes borderAnimation { @keyframes borderAnimation {
@@ -82,18 +66,21 @@
@keyframes backgroundSubAnimation { @keyframes backgroundSubAnimation {
0% { 0% {
background: var(--border-color-1);
}
10% {
background: var(--border-color-flash-1); background: var(--border-color-flash-1);
} }
50% { 50% {
background: var(--border-color-flash-2); background: var(--border-color-flash-2);
} }
80% { 100% {
background: var(--border-color-flash-1); background: var(--border-color-flash-1);
} }
100% { }
background: var(--border-color-2);
@keyframes tfBannerAnimation {
from {
margin-top: -200px;
}
to {
margin-top: 0px;
} }
} }

24
css/style.css
View File

@@ -55,3 +55,27 @@ html {
animation-duration: 20s; animation-duration: 20s;
animation-name: backgroundAnimation; animation-name: backgroundAnimation;
} }
#teafire-banner {
height: 50px;
width: 180px;
padding: 20px;
margin-top: -200px;
z-index: 1;
animation-timing-function: linear;
float: right;
}
#teafire-banner p {
color: teal;
float: left;
font-size: 23pt;
font-weight: bolder;
padding-top: 8px;
padding-left: 5px;
}
#teafire-banner img {
color: teal;
height: 50px;
float: left;
}

8
css/variables.css
View File

@@ -1,7 +1,7 @@
:root { :root {
--border-color-1: rgb(139, 0, 0); --border-color-1: rgb(113, 0, 0);
--border-color-2: rgb(255, 74, 74); --border-color-2: rgb(235, 19, 19);
--border-color-flash-1: rgb(220, 32, 15); --border-color-flash-1: rgb(255, 27, 6);
--border-color-flash-2: rgb(210, 220, 15); --border-color-flash-2: rgb(208, 218, 20);
} }

4
frame.html
View File

@@ -11,6 +11,10 @@
</head> </head>
<body> <body>
<div id="frame"></div> <div id="frame"></div>
<div id="teafire-banner">
<img src="img/logo128x128.png" alt="" />
<p>TealFire</p>
</div>
<div id="subCount">0</div> <div id="subCount">0</div>
<script src="config.js"></script> <script src="config.js"></script>
<script src="js/socket.io.min.js"></script> <script src="js/socket.io.min.js"></script>

BIN
img/logo128x128.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.7 KiB

35
js/app.js
View File

@@ -1,5 +1,6 @@
const subCount = document.getElementById("subCount"); const subCount = document.getElementById("subCount");
const frame = document.getElementById("frame"); const frame = document.getElementById("frame");
const tfBanner = document.getElementById("teafire-banner");
let subCountNumber = 0; let subCountNumber = 0;
@@ -16,10 +17,10 @@ function updateSubCount() {
function sub(subName) { function sub(subName) {
frame.style.animationName = "subAnimation"; frame.style.animationName = "subAnimation";
frame.style.animationDuration = "11s"; frame.style.animationDuration = "2s";
subCount.style.animationName = "backgroundSubAnimation"; subCount.style.animationName = "backgroundSubAnimation";
subCount.style.animationDuration = "11s"; subCount.style.animationDuration = "2s";
subCount.innerText = subName + " " + subCountNumber; subCount.innerText = subName + " " + subCountNumber;
@@ -33,4 +34,34 @@ function sub(subName) {
updateSubCount(); updateSubCount();
}, 11000); }, 11000);
} }
function showTealFireBanner() {
tfBanner.style.animationName = "tfBannerAnimation";
tfBanner.style.animationDuration = "3s";
tfBanner.style.animationDirection = "normal";
setTimeout(() => {
tfBanner.style.marginTop = "0px";
tfBanner.style.animationName = "";
tfBanner.style.animationDuration = "";
}, 3000);
}
function closeTealFireBanner() {
tfBanner.style.animationName = "tfBannerAnimation";
tfBanner.style.animationDuration = "3s";
tfBanner.style.animationDirection = "reverse";
setTimeout(() => {
tfBanner.style.marginTop = "-200px";
tfBanner.style.animationName = "";
tfBanner.style.animationDuration = "";
}, 3000);
}
setInterval(() => {
showTealFireBanner();
setTimeout(() => {
closeTealFireBanner();
}, 20000);
}, 300000);
updateSubCount(); updateSubCount();

1
js/socket.js
View File

@@ -16,6 +16,7 @@ fetch("https://api.tipeeestream.com/v2.0/site/socket")
}); });
}); });
socket.on("new-event", (data) => { socket.on("new-event", (data) => {
console.log(data);
if (data.event.type == "subscription") { if (data.event.type == "subscription") {
sub(data.event.parameters.username); sub(data.event.parameters.username);
} }

2
meta.json
View File

@@ -1,3 +1,3 @@
{ {
"version": "v0.0.6" "version": "v0.1.1"
} }

11
update.ps1
View File

@@ -32,7 +32,16 @@ if ($newestVersionString -ne "") {
else { else {
Write-Output "Updating to newer version..." Write-Output "Updating to newer version..."
Remove-Item * -Recurse -Force -Confirm if (Test-Path "./config.js") {
if (Test-Path "./config-old.js") {
Remove-Item config-old.js
}
Copy-Item "./config.js" -Destination "./config-old.js"
Write-Output "config.js has been copied"
}
Remove-Item * -Recurse -Force -Exclude config-old.js
mkdir ./temp mkdir ./temp
attrib +h ./temp attrib +h ./temp

2
update_force.bat Normal file
View File

@@ -0,0 +1,2 @@
powershell ./update_force.ps1
pause

39
update_force.ps1 Normal file
View File

@@ -0,0 +1,39 @@
Write-Output "Starting update..."
$newestVersionString = ""
$req = Invoke-WebRequest https://github.com/DerTyp876/obs-twitch-camera-frame/releases/latest
foreach ($tag in $req.ParsedHtml.body.getElementsByTagName('h1')) {
if ($tag.innerText[0] -eq "v") {
$newestVersionString = $tag.innerText
}
}
Write-Output "Updating to newer version..."
if (Test-Path "./config.js") {
if (Test-Path "./config-old.js") {
Remove-Item config-old.js
}
Copy-Item "./config.js" -Destination "./config-old.js"
Write-Output "config.js has been copied"
}
Remove-Item * -Recurse -Force -Exclude config-old.js
mkdir ./temp
attrib +h ./temp
Write-Output "Downloading newer version..."
Invoke-WebRequest -Uri "https://github.com/DerTyp876/obs-twitch-camera-frame/archive/refs/tags/$newestVersionString.zip" -OutFile "./temp/$newestVersionString.zip"
Write-Output "Extracting archive..."
Expand-Archive -Path "./temp/$newestVersionString.zip" -DestinationPath "./temp/"
Get-ChildItem -Path "./temp/obs-twitch-camera-frame-$($newestVersionString -replace 'v')" -Recurse | Move-Item -Destination "./"
Remove-Item "./temp" -Recurse -Force -Confirm
Write-Output "You are now up to date again!"
Write-Output "You need to add your API-Key again to the config.js!"
pause