mirror of
https://github.com/DerTyp7/obs-twitch-camera-frame.git
synced 2025-10-29 04:42:13 +01:00
first commit
This commit is contained in:
Janis
3
config.js
Normal file
3
config.js
Normal file
@@ -0,0 +1,3 @@
|
||||
const CONFIG = {
|
||||
apiKey: "1e8d3bcbc24f95e64672521ccdcf6020e2d64d30",
|
||||
};
|
||||
99
css/animations.css
Normal file
99
css/animations.css
Normal 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
57
css/style.css
Normal 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
7
css/variables.css
Normal 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
20
frame.html
Normal 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
36
js/app.js
Normal 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
7
js/socket.io.min.js
vendored
Normal file
File diff suppressed because one or more lines are too long
24
js/socket.js
Normal file
24
js/socket.js
Normal 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);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
2
update.bat
Normal file
2
update.bat
Normal file
@@ -0,0 +1,2 @@
|
||||
powershell ./update.ps1
|
||||
pause
|
||||
55
update.ps1
Normal file
55
update.ps1
Normal 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!"
|
||||
}
|
||||
|
||||
|
||||
|
||||
Reference in New Issue
Block a user