Comments (9)
This is a great idea. I will work on adding this feature. What I am thinking is adding a text area where users can format the text that appears in the panel. Something like:
{title}
While streaming {game}
Clipped by {creator_name} on {created_at}
{title},{game},{creator_name},{created_at} would act as placeholders/variables.
The css/styling could be modified in the obs browser source to achieve the look that the user wants.
from twitch_clips_player.
Also, If you want the panel to look similar to the original screenshot that you posted, try adding this CSS to the Custom CSS section of the OBS browser source.
#text-container {
background: #00008890;
animation: fadeout 20s forwards;
}
#details-container {
top: 35vw;
border-radius: 24px;
transform: skew(5deg, -5deg);
margin-left: 20px;
background: #00008890;
border: solid 2px #00008898;
box-shadow: 10px 10px #00000090;
animation: fadeout 20s forwards;
}
#details-container .details-text.item-0 {
font-size: 4vw;
}
#details-container .details-text.item-1 {
font-size: 3vw;
}
#details-container .details-text.item-2 {
font-size: 2vw;
}
#details-container .details-text.item-3 {
font-size: 1.5vw;
}
from twitch_clips_player.
It's working great now, did some CSS customization and it's now chef's kiss!
Great stuff!
from twitch_clips_player.
Alright! Good to know cause I was looking for something like that and I have been using yours with great success so far. Thanks!
from twitch_clips_player.
I have added a simple clips details panel as an option on the overlay.
CSS/styling can be controlled from the OBS browser source.
To change the background color or the panel or panel time limit, change these values and add to the browser source:
#details-container {
background: #00000090;
animation: fadeout 15s forwards;
}
Let me know if you have any questions or issues.
from twitch_clips_player.
I've used it, but for whatever reason, it always shows the info of one clip and then it repeats the same info for all the clips.
Always the same title with these 3 different clips.
from twitch_clips_player.
Interesting. I think this may be a cache issue? In the OBS browser source, click the Refresh cache of current page.
Also, are you running this locally or using the hosted version here: https://twitch-clips-player.pages.dev. If running locally, you may need to pull in the latest code changes from the Main branch.
I tested this in OBS and was not able to reproduce this issue, which makes me think that it is related to browser sources cache.
from twitch_clips_player.
Yeah, I've tried the cache thing and it's not something that happened once. I actually restarted the PC and still happened.
from twitch_clips_player.
Thank you for trying that!
Good News! I was able to reproduce the issue and fix it. So sorry for the confusion. Please try to clear the browser source cache and try the clips player again. You should not need to generate a new url.
from twitch_clips_player.
Related Issues (4)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from twitch_clips_player.