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

first commit

Browse Source
This commit is contained in:
Janis
2022-10-29 15:36:09 +02:00
commit 3e4b2af015
11 changed files with 313 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
config.js Normal file
View File

@@ -0,0 +1,3 @@
const CONFIG = {
apiKey: "1e8d3bcbc24f95e64672521ccdcf6020e2d64d30",
};

99
css/animations.css Normal file
View File

@@ -0,0 +1,99 @@
@keyframes subAnimation {
0% {
border-image: linear-gradient(
to top,
var(--border-color-1),
var(--border-color-2)
)
1;
}
10% {
border-image: linear-gradient(
to top,
var(--border-color-flash-1),
var(--border-color-flash-2)
)
1;
}
50% {
border-image: linear-gradient(
to top,
var(--border-color-flash-2),
var(--border-color-flash-1)
)
1;
}
80% {
border-image: linear-gradient(
to top,
var(--border-color-flash-1),
var(--border-color-flash-2)
)
1;
}
100% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
}
@keyframes borderAnimation {
0% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
50% {
border-image: linear-gradient(
to top,
var(--border-color-1),
var(--border-color-2)
)
1;
}
100% {
border-image: linear-gradient(
to top,
var(--border-color-2),
var(--border-color-1)
)
1;
}
}
@keyframes backgroundAnimation {
0% {
background: var(--border-color-2);
}
50% {
background: var(--border-color-1);
}
100% {
background: var(--border-color-2);
}
}
@keyframes backgroundSubAnimation {
0% {
background: var(--border-color-1);
}
10% {
background: var(--border-color-flash-1);
}
50% {
background: var(--border-color-flash-2);
}
80% {
background: var(--border-color-flash-1);
}
100% {
background: var(--border-color-2);
}
}

57
css/style.css Normal file
View File

@@ -0,0 +1,57 @@
@import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");
* {
margin: 0;
padding: 0;
color: white;
font-family: "Roboto", sans-serif;
font-weight: bold;
}
body,
html {
min-height: 100%;
}
#frame {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
display: block;
border: 10px solid var(--border-color-1);
height: 100vh;
width: 100%;
background-color: transparent;
box-sizing: border-box;
border-image: linear-gradient(
to right,
var(--border-color-1),
var(--border-color-2)
)
1;
transition: border linear 200ms;
z-index: 100;
animation-name: borderAnimation;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-duration: 20s;
}
#subCount {
background: var(--border-color-2);
height: 20px;
padding: 5px;
padding-bottom: 10px;
display: block;
position: absolute;
bottom: 10px;
right: 10px;
font-size: 17pt;
animation-iteration-count: infinite;
animation-fill-mode: forwards;
animation-timing-function: linear;
animation-duration: 20s;
animation-name: backgroundAnimation;
}

7
css/variables.css Normal file
View File

@@ -0,0 +1,7 @@
:root {
--border-color-1: rgb(139, 0, 0);
--border-color-2: rgb(255, 74, 74);
--border-color-flash-1: rgb(220, 32, 15);
--border-color-flash-2: rgb(210, 220, 15);
}

20
frame.html Normal file
View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="css/variables.css" />
<link rel="stylesheet" href="css/animations.css" />
<link rel="stylesheet" href="css/style.css" />
<title>Document</title>
</head>
<body>
<div id="frame"></div>
<div id="subCount">0</div>
<script src="config.js"></script>
<script src="js/socket.io.min.js"></script>
<script src="js/app.js"></script>
<script src="js/socket.js"></script>
</body>
</html>

36
js/app.js Normal file
View File

@@ -0,0 +1,36 @@
const subCount = document.getElementById("subCount");
const frame = document.getElementById("frame");
let subCountNumber = 0;
function updateSubCount() {
fetch(
`https://api.tipeeestream.com/v1.0/events/forever.json?apiKey=${CONFIG.apiKey}`
)
.then((res) => res.json())
.then((json) => {
subCountNumber = json.datas.subscribers;
subCount.innerText = subCountNumber;
});
}
function sub(subName) {
frame.style.animationName = "subAnimation";
frame.style.animationDuration = "2s";
subCount.style.animationName = "backgroundSubAnimation";
subCount.style.animationDuration = "2s";
subCount.innerText = subName + " " + subCountNumber;
setTimeout(() => {
frame.style.animationName = "borderAnimation";
frame.style.animationDuration = "20s";
subCount.style.animationName = "backgroundAnimation";
subCount.style.animationDuration = "20s";
subCount.innerText = subCountNumber;
updateSubCount();
}, 2000);
}
updateSubCount();

7
js/socket.io.min.js vendored Normal file
View File

File diff suppressed because one or more lines are too long

24
js/socket.js Normal file
View File

@@ -0,0 +1,24 @@
fetch("https://api.tipeeestream.com/v2.0/site/socket")
.then((res) => res.json())
.then((json) => {
if (json.code == 200) {
const socket = io(`${json.datas.host}:${json.datas.port}`, {
query: {
access_token: CONFIG.apiKey,
},
});
socket.on("connect", () => {
console.log("Connected");
socket.emit("join-room", {
room: CONFIG.apiKey,
username: "DerTyp876",
});
});
socket.on("new-event", (data) => {
if (data.event.type == "subscription") {
sub(data.event.parameters.username);
}
});
}
});

3
meta.json Normal file
View File

@@ -0,0 +1,3 @@
{
"version": "v0.0.1"
}

2
update.bat Normal file
View File

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

55
update.ps1 Normal file
View File

@@ -0,0 +1,55 @@
Write-Output "Starting update..."
$currentVersionString = (Get-Content .\meta.json | ConvertFrom-Json).version
Write-Output "Current version: $currentVersion"
Write-Output "Searching for newest version..."
$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
}
}
if ($newestVersionString -ne "") {
Write-Output "Newest version found: $newestVersion"
$currentVersion = ($currentVersionString -replace "v").split(".")
$newestVersion = ($newestVersionString -replace "v").split(".")
if ($currentVersion[0] -gt $newestVersion[0]) {
Write-Output "Current version is up to date!"
}
elseif ($currentVersion[1] -gt $newestVersion[1]) {
Write-Output "Current version is up to date!"
}
elseif ($currentVersion[2] -ge $newestVersion[2]) {
Write-Output "Current version is up to date!"
}
else {
Write-Output "Updating to newer version..."
Remove-Item * -Recurse -Force -Confirm
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/ts5-obs-overlay-$($newestVersionString -replace 'v')" -Recurse | Move-Item -Destination "./"
Remove-Item "./temp" -Recurse -Force -Confirm
Write-Output "You are now up to date again!"
}
}
else {
Write-Output "No new version found!"
}