diff --git a/.gitignore b/.gitignore index 422b4ba..9f51806 100644 --- a/.gitignore +++ b/.gitignore @@ -2,3 +2,5 @@ build/ node_modules frontend/dist frontend/wailsjs + +.prettierignore \ No newline at end of file diff --git a/NOTES.md b/NOTES.md index 6b36ea5..9b49b98 100644 --- a/NOTES.md +++ b/NOTES.md @@ -1,5 +1,16 @@ # Doing +Create loading indicator before API is called + +If api query returns error: +- stop interval +- show error to user +- wait for user to press "retry" button to restart interval + +Settings +- allow user to change api key +- allow user to change api interval time + Get user's: username, password, stream key Query API Display followers, subscribers, etc. @@ -7,4 +18,4 @@ Display followers, subscribers, etc. User settings: - API query timer (default: 2s) -# To Do \ No newline at end of file +# To Do diff --git a/app.go b/app.go index 9b538a0..d5d9339 100644 --- a/app.go +++ b/app.go @@ -5,6 +5,7 @@ import ( "fmt" "github.com/tylertravisty/go-utils/random" + rumblelivestreamlib "github.com/tylertravisty/rumble-livestream-lib-go" ) // App struct @@ -33,3 +34,16 @@ func (a *App) Greet(name string) string { //return fmt.Sprintf("Hello %s, It's show time!", name) return fmt.Sprintf("Hello %s, It's show time!", random) } + +func (a *App) QueryAPI(url string) (*rumblelivestreamlib.Followers, error) { + fmt.Println("QueryAPI") + client := rumblelivestreamlib.Client{StreamKey: url} + resp, err := client.Request() + if err != nil { + // TODO: log error + fmt.Println("client.Request err:", err) + return nil, fmt.Errorf("API request failed") + } + + return &resp.Followers, nil +} diff --git a/frontend/src/assets/icons/eye-slash.png b/frontend/src/assets/icons/eye-slash.png new file mode 100644 index 0000000..fe97fa0 Binary files /dev/null and b/frontend/src/assets/icons/eye-slash.png differ diff --git a/frontend/src/assets/icons/eye.png b/frontend/src/assets/icons/eye.png new file mode 100644 index 0000000..5ca94ec Binary files /dev/null and b/frontend/src/assets/icons/eye.png differ diff --git a/frontend/src/assets/icons/index.jsx b/frontend/src/assets/icons/index.jsx new file mode 100644 index 0000000..c4c8028 --- /dev/null +++ b/frontend/src/assets/icons/index.jsx @@ -0,0 +1,5 @@ +import eye from './eye.png'; +import eye_slash from './eye-slash.png'; + +export const Eye = eye; +export const EyeSlash = eye_slash; diff --git a/frontend/src/screens/Dashboard.css b/frontend/src/screens/Dashboard.css index c8d96c9..fba8777 100644 --- a/frontend/src/screens/Dashboard.css +++ b/frontend/src/screens/Dashboard.css @@ -3,6 +3,80 @@ background-color: #f3f5f8; display: flex; flex-direction: column; - justify-content: space-between; height: 100vh; + width: 100%; +} + +.followers { + background-color: #061726; + height: 100%; + width: 100%; +} + +.followers-list { + overflow-y: auto; +} + +.followers-list-follower { + border-bottom: 1px solid #82b1ff; + color: white; + display: flex; + flex-direction: row; + font-family: sans-serif; + justify-content: space-between; + padding: 10px 20px; +} + +.followers-list-follower-username { + font-weight: bold; +} + +.followers-list-follower-date { + font-family: monospace; +} + +.followers-header { + align-items: center; + border-bottom: 1px solid #82b1ff; + display: flex; + flex-direction: column; + justify-content: space-evenly; + padding: 10px 20px; +} + +.followers-header-title { + color: white; + font-family: sans-serif; + font-size: 24px; + font-weight: bold; + padding-bottom: 10px; + text-transform: uppercase; +} + +.followers-header-highlights { + display: flex; + flex-direction: row; + justify-content: space-evenly; + width: 100%; +} + +.followers-header-highlight { + align-items: center; + color: white; + display: flex; + background-color: #75a54b; + border-radius: 0.5rem; + flex-direction: column; + font-family: sans-serif; + font-weight: bold; + min-width: 50px; + padding: 10px; +} + +.followers-header-highlight-count { + font-size: 16px; +} + +.followers-header-highlight-description { + font-size: 12px; } \ No newline at end of file diff --git a/frontend/src/screens/Dashboard.jsx b/frontend/src/screens/Dashboard.jsx index 5a45a4e..599e0e6 100644 --- a/frontend/src/screens/Dashboard.jsx +++ b/frontend/src/screens/Dashboard.jsx @@ -1,14 +1,162 @@ -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useLocation } from 'react-router-dom'; +import { QueryAPI } from '../../wailsjs/go/main/App'; import './Dashboard.css'; function Dashboard() { const location = useLocation(); const [streamKey, setStreamKey] = useState(location.state.streamKey); + const [followers, setFollowers] = useState({}); + const [totalFollowers, setTotalFollowers] = useState('-'); + const [channelFollowers, setChannelFollowers] = useState('-'); + const [latestFollower, setLatestFollower] = useState('-'); + const [recentFollowers, setRecentFollowers] = useState([]); + + // useEffect(() => { + // QueryAPI(streamKey) + // .then((response) => { + // console.log(response); + // setFollowers(response); + // setChannelFollowers(response.num_followers); + // setTotalFollowers(response.num_followers_total); + // setLatestFollower(response.latest_follower.username); + // setRecentFollowers(response.recent_followers); + // }) + // .catch((e) => console.log('Error:', e)); + // }, []); + + useEffect(() => { + let interval = setInterval(() => { + console.log('Query API'); + QueryAPI(streamKey) + .then((response) => { + console.log(response); + setFollowers(response); + setChannelFollowers(response.num_followers); + setTotalFollowers(response.num_followers_total); + setLatestFollower(response.latest_follower.username); + setRecentFollowers(response.recent_followers); + }) + .catch((e) => console.log('Error:', e)); + }, 10000); + + return () => { + clearInterval(interval); + }; + }, []); + + const dateDate = (date) => { + const options = { month: 'short' }; + let month = new Intl.DateTimeFormat('en-US', options).format(date); + let day = date.getDay(); + return month + ' ' + day; + }; + + const dateDay = (date) => { + let now = new Date(); + let today = now.getDay(); + switch (date.getDay()) { + case 0: + return 'Sunday'; + case 1: + return 'Monday'; + case 2: + return 'Tuesday'; + case 3: + return 'Wednesday'; + case 4: + return 'Thursday'; + case 5: + return 'Friday'; + case 6: + return 'Saturday'; + } + }; + + const dateTime = (date) => { + let now = new Date(); + let today = now.getDay(); + let day = date.getDay(); + + if (today !== day) { + return dateDay(date); + } + + let hours24 = date.getHours(); + let hours = hours24 % 12 || 12; + + let minutes = date.getMinutes(); + + let mer = 'pm'; + if (hours24 < 12) { + mer = 'am'; + } + + return hours + ':' + minutes + ' ' + mer; + }; + + const dateString = (d) => { + let now = new Date(); + let date = new Date(d); + // Fix Rumble's timezone problem + date.setHours(date.getHours() - 4); + let diff = now - date; + switch (true) { + case diff < 60000: + return 'Now'; + case diff < 3600000: + let minutes = Math.floor(diff / 1000 / 60); + let postfix = ' minutes ago'; + if (minutes == 1) { + postfix = ' minute ago'; + } + return minutes + postfix; + case diff < 86400000: + return dateTime(date); + case diff < 604800000: + return dateDay(date); + default: + return dateDate(date); + } + console.log('Diff:', diff); + return d; + }; + return (
- Dashboard: {streamKey} + Dashboard: +
+
+ Followers +
+
+ + {channelFollowers} + + Channel +
+
+ + {totalFollowers} + + Total +
+
+
+
+ {recentFollowers.map((follower, index) => ( +
+ + {follower.username} + + + {dateString(follower.followed_on)} + +
+ ))} +
+
); } diff --git a/frontend/src/screens/SignIn.css b/frontend/src/screens/SignIn.css index b4503eb..961bfa8 100644 --- a/frontend/src/screens/SignIn.css +++ b/frontend/src/screens/SignIn.css @@ -23,13 +23,19 @@ } .signin-input { - border: 2px solid #D6E0EA; + border-bottom: 2px solid #D6E0EA; + border-left: 2px solid #D6E0EA; + border-right: none; + border-top: 2px solid #D6E0EA; border-radius: 10rem 0rem 0rem 10rem; background-color: white; color: #061726; outline: none; - padding: 0.5rem 1rem; - width: 80%; + padding-bottom: 0.5rem; + padding-left: 1rem; + padding-right: 0; + padding-top: 0.5rem; + width: 70%; } .signin-button { @@ -47,6 +53,27 @@ background-color: #77b23b; } +.signin-show { + display: flex; + align-items: center; + justify-content: center; + background-color: white; + border-bottom: 2px solid #D6E0EA; + border-left: none; + border-right: 2px solid #D6E0EA; + border-top: 2px solid #D6E0EA; + color: #061726; + cursor: pointer; + font-weight: bold; + text-decoration: none; + width: 10%; +} + +.signin-show-icon { + height: 16px; + width: 16px; +} + .signin-label { font-family: sans-serif; font-weight: bold; diff --git a/frontend/src/screens/SignIn.jsx b/frontend/src/screens/SignIn.jsx index ba27b95..6888fc6 100644 --- a/frontend/src/screens/SignIn.jsx +++ b/frontend/src/screens/SignIn.jsx @@ -1,12 +1,15 @@ import { useEffect, useState } from 'react'; import { Navigate, useNavigate } from 'react-router-dom'; import { NavDashboard } from './Navigation'; +import { Eye, EyeSlash } from '../assets/icons'; import './SignIn.css'; function SignIn() { const navigate = useNavigate(); const [streamKey, setStreamKey] = useState(''); const updateStreamKey = (event) => setStreamKey(event.target.value); + const [showStreamKey, setShowStreamKey] = useState(false); + const updateShowStreamKey = () => setShowStreamKey(!showStreamKey); const saveStreamKey = () => { navigate(NavDashboard, { state: { streamKey: streamKey } }); @@ -26,9 +29,15 @@ function SignIn() { className='signin-input' onChange={updateStreamKey} placeholder='Stream Key' - type='text' + type={showStreamKey ? 'text' : 'password'} value={streamKey} /> + diff --git a/go.mod b/go.mod index 2c1616a..f4e2f55 100644 --- a/go.mod +++ b/go.mod @@ -4,6 +4,7 @@ go 1.19 require ( github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909 + github.com/tylertravisty/rumble-livestream-lib-go v0.0.0-20231213162428-b33f413975bb github.com/wailsapp/wails/v2 v2.7.1 ) @@ -24,6 +25,7 @@ require ( github.com/pkg/browser v0.0.0-20210911075715-681adbf594b8 // indirect github.com/pkg/errors v0.9.1 // indirect github.com/rivo/uniseg v0.4.4 // indirect + github.com/robertkrimen/otto v0.2.1 // indirect github.com/samber/lo v1.38.1 // indirect github.com/tkrajina/go-reflector v0.5.6 // indirect github.com/valyala/bytebufferpool v1.0.0 // indirect @@ -35,6 +37,7 @@ require ( golang.org/x/net v0.17.0 // indirect golang.org/x/sys v0.13.0 // indirect golang.org/x/text v0.13.0 // indirect + gopkg.in/sourcemap.v1 v1.0.5 // indirect ) // replace github.com/wailsapp/wails/v2 v2.7.1 => /home/tyler/dev/go/pkg/mod diff --git a/go.sum b/go.sum index e714476..8457545 100644 --- a/go.sum +++ b/go.sum @@ -44,6 +44,8 @@ github.com/pmezard/go-difflib v1.0.0/go.mod h1:iKH77koFhYxTK1pcRnkKkqfTogsbg7gZN github.com/rivo/uniseg v0.2.0/go.mod h1:J6wj4VEh+S6ZtnVlnTBMWIodfgj8LQOQFoIToxlJtxc= github.com/rivo/uniseg v0.4.4 h1:8TfxU8dW6PdqD27gjM8MVNuicgxIjxpm4K7x4jp8sis= github.com/rivo/uniseg v0.4.4/go.mod h1:FN3SvrM+Zdj16jyLfmOkMNblXMcoc8DfTHruCPUcx88= +github.com/robertkrimen/otto v0.2.1 h1:FVP0PJ0AHIjC+N4pKCG9yCDz6LHNPCwi/GKID5pGGF0= +github.com/robertkrimen/otto v0.2.1/go.mod h1:UPwtJ1Xu7JrLcZjNWN8orJaM5n5YEtqL//farB5FlRY= github.com/samber/lo v1.38.1 h1:j2XEAqXKb09Am4ebOg31SpvzUTTs6EN3VfgeLUhPdXM= github.com/samber/lo v1.38.1/go.mod h1:+m/ZKRl6ClXCE2Lgf3MsQlWfh4bn1bz6CXEOxnEXnEA= github.com/stretchr/objx v0.1.0/go.mod h1:HFkY916IF+rwdDfMAkV7OtwuqBVzrE8GR6GFx+wExME= @@ -53,6 +55,8 @@ github.com/tkrajina/go-reflector v0.5.6 h1:hKQ0gyocG7vgMD2M3dRlYN6WBBOmdoOzJ6njQ github.com/tkrajina/go-reflector v0.5.6/go.mod h1:ECbqLgccecY5kPmPmXg1MrHW585yMcDkVl6IvJe64T4= github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909 h1:xrjIFqzGQXlCrCdMPpW6+SodGFSlrQ3ZNUCr3f5tF1g= github.com/tylertravisty/go-utils v0.0.0-20230524204414-6893ae548909/go.mod h1:2W31Jhs9YSy7y500wsCOW0bcamGi9foQV1CKrfvfTxk= +github.com/tylertravisty/rumble-livestream-lib-go v0.0.0-20231213162428-b33f413975bb h1:nqq0eTr8ocCaENdoryAt9T3g5xJgwcXMW7pYAztb1lc= +github.com/tylertravisty/rumble-livestream-lib-go v0.0.0-20231213162428-b33f413975bb/go.mod h1:YrfW5N6xVozOzubzfNNsy+v0MIL2GPi9Kx3mTZ/Q9zI= github.com/valyala/bytebufferpool v1.0.0 h1:GqA5TC/0021Y/b9FG4Oi9Mr3q7XYx6KllzawFIhcdPw= github.com/valyala/bytebufferpool v1.0.0/go.mod h1:6bBcMArwyJ5K/AmCkWv1jt77kVWyCJ6HpOuEn7z0Csc= github.com/valyala/fasttemplate v1.2.1/go.mod h1:KHLXt3tVN2HBp8eijSv/kGJopbvo7S+qRAEEKiv+SiQ= @@ -89,6 +93,8 @@ golang.org/x/text v0.13.0 h1:ablQoSUd0tRdKxZewP80B+BaqeKJuVhuRxj/dkrun3k= golang.org/x/text v0.13.0/go.mod h1:TvPlkZtksWOMsz7fbANvkp4WM8x/WCo/om8BMLbz+aE= golang.org/x/tools v0.0.0-20180917221912-90fa682c2a6e/go.mod h1:n7NCudcB/nEzxVGmLbDWY5pfWTLqBcC2KZ6jyYvM4mQ= gopkg.in/check.v1 v0.0.0-20161208181325-20d25e280405/go.mod h1:Co6ibVJAznAaIkqp8huTwlJQCZ016jof/cbN4VW5Yz0= +gopkg.in/sourcemap.v1 v1.0.5 h1:inv58fC9f9J3TK2Y2R1NPntXEn3/wjWHkonhIUODNTI= +gopkg.in/sourcemap.v1 v1.0.5/go.mod h1:2RlvNNSMglmRrcvhfuzp4hQHwOtjxlbjX7UPY/GXb78= gopkg.in/yaml.v3 v3.0.0-20200313102051-9f266ea9e77c/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM= gopkg.in/yaml.v3 v3.0.0-20210107192922-496545a6307b/go.mod h1:K4uyk7z7BCEPqu6E+C64Yfv1cQ7kz7rIZviUmN+EgEM= gopkg.in/yaml.v3 v3.0.1 h1:fxVm/GzAzEWqLHuvctI91KS9hhNmmWOoWu0XTYJS7CA=