Twitch/index.html at main · StreamStats/Twitch · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>StreamStats</title>
    <link rel="icon" type="image/x-icon" href="default-favicon.ico" id="favicon">
    <meta name="og:image" content="default-image-url.png" id="og-image">
    <meta name="twitter:image" content="default-image-url.png" id="twitter-image">
    <!-- Include Bootstrap CSS -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" crossorigin="anonymous">
    <link rel="stylesheet" href="https://cdn.rawgit.com/needim/noty/77268c46/lib/noty.css">
    <link rel="stylesheet" href="https://thecursedgroup.github.io/css/gtatheme.css">
    <script type="text/javascript" src="https://streamstats.github.io/TwitchStats/js/bootstrap.js"></script>
    <script type="text/javascript" src="meta.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.29.1/moment.min.js"></script>
</head>
<body>
    <div class="container">
        <h1>Twitch Stats</h1>
        <div id="login-section">
            <button class="btn btn-primary" id="login-button">Login with Twitch</button>
        </div>
        <div id="user-info" style="display: none;">
            <h2>User Information</h2>
            <p><strong>Username:</strong> <span id="username"></span></p>
            <p><strong>Followers:</strong> <span id="followers"></span></p>
            <!-- You can display more user information here -->
        </div>
        <div id="alert-section" style="display: none;">
            <div class="alert alert-danger" role="alert">
                You are banned from this channel!
            </div>
        </div>
        <div id="redirect-section" style="display: none;">
            <!-- Change the button to an anchor element -->
            <a class="btn btn-primary" id="redirect-button" href="#">Redirect to Twitch</a>
        </div>
    </div>
    <footer>
        &copy; <span id="current-year"></span> Bacon_Space <!-- Update the year here too -->
    </footer>
    <!-- Include Bootstrap and Twitch SDK JS scripts -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.min.js"></script>
    <script src="https://embed.twitch.tv/embed/v1.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/needim/noty@77268c46/lib/noty.min.js"></script>
    <script>
        // Replace with your Twitch Client ID
        const clientId = "5i1dxwe52zbj0tra8evwmm4m1b7clz1";
        let bannedUsers = [];

        // Fetch the banned user list from the given URL
        fetch('https://polyextended.github.io/lookup/banned.json')
            .then(response => response.json())
            .then(data => {
                bannedUsers = data.users;
            })
            .catch(error => {
                console.error('Error fetching banned users:', error);
            });

        // Initialize the Twitch Embed SDK
        const options = {
            width: 300,
            height: 150,
            channel: "your_twitch_channel_name", // Replace with the channel you want to embed
        };
        new Twitch.Embed("twitch-embed", options);

        // Function to handle the login button click
        document.getElementById("login-button").addEventListener("click", () => {
            // Get the current page's URL
            const currentPageUrl = window.location.href;

            // Redirect the user to Twitch for authentication with the current page's URL as the redirect URI
            window.location.href = `https://id.twitch.tv/oauth2/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(currentPageUrl)}&response_type=token&scope=user:read:follows`;
        });

        // Function to handle the redirect button click
        document.getElementById("redirect-button").addEventListener("click", () => {
            // Get the current page's URL
            const currentPageUrl = window.location.href;

            // Redirect the user to Twitch for authentication with the current page's URL as the redirect URI
            window.location.href = `https://id.twitch.tv/oauth2/authorize?client_id=${clientId}&redirect_uri=${encodeURIComponent(currentPageUrl)}&response_type=token&scope=user:read:follows`;
        });

        // Function to handle the redirect and fetch user data
        function handleRedirect() {
            const urlParams = new URLSearchParams(window.location.hash.substring(1));
            const accessToken = urlParams.get("access_token");

            if (accessToken) {
                // Fetch user data using the access token
                fetch("https://api.twitch.tv/helix/users", {
                    headers: {
                        "Client-ID": clientId,
                        "Authorization": `Bearer ${accessToken}`,
                    },
                })
                    .then(response => response.json())
                    .then(data => {
                        const user = data.data[0];
                        document.getElementById("username").textContent = user.display_name;
                        // You can fetch and display more user data here if needed
                        document.getElementById("followers").textContent = user.followers_count;

                        // Check if the user is banned
                        if (bannedUsers.includes(user.display_name.toLowerCase())) {
                            document.getElementById("alert-section").style.display = "block";
                            document.getElementById("login-section").style.display = "none";
                            document.getElementById("redirect-section").style.display = "none"; // Hide the redirect button
                            // Show a Noty notification for banned users
                            new Noty({
                                type: 'error',
                                theme: 'gta',
                                text: 'You are banned from this channel!',
                                timeout: 5000 // Notification will auto-close after 5 seconds
                            }).show();
                        } else {
                            // Show the user information section
                            document.getElementById("user-info").style.display = "block";
                            document.getElementById("login-section").style.display = "none";
                            document.getElementById("redirect-section").style.display = "none"; // Hide the redirect button
                        }
                    })
                    .catch(error => console.error("Error fetching user data:", error));
            }
        }

        // Check if the page was loaded after a redirect
        if (window.location.hash.includes("access_token")) {
            handleRedirect();
        }
    </script>
</body>
</html>