Giter Club home page Giter Club logo

sadgeclipper's Introduction

SadgeClipper

A useful clips and highlights dashboard powered by Twitch API

SadgeClipper is a simple, static dashboard that uses the Twitch API to get clips from the last week.

This is in beta - see the roadmap for future plans.

If you have any feedback or ideas please tweet me @dylan_mye or create an issue here (requires a GitHub account).

Demo here

Setup

There's no extra modules to install or anything - this project uses cdnjs to load scripts.

To adapt the project for your own use/domain, set up a app with Twitch here and replace the following variables in script.js:

let client_id = "<your-client-id-here>";
let raw_base_url = "https://<domain and path to sadgeclipper instance here>/";

Make sure raw_base_url has a slash at the end. You should set that value + oauth-callback.html as an OAuth Redirect URL (1). You can get the client ID value from (2).

screenshot of the Twitch Manage App page. The textbox underneath 'Oauth Redirect URLs' is highlighted as number 1. The textbox underneath 'Client ID' is highlighted as number 2.

You can read about the Twitch API here and read the reference docs here.

Licenses

SadgeClipper is licensed under the ISC - you must include the copyright notice in any copies as well as a copy of that license file.

SadgeClipper depends on the following software:

  • Cash by Fabio Spampinato, Ken Wheeler and contributors, licensed under MIT. Portions copyright 2014-2020 Ken Wheeler, 2020-present Fabio Spampinato.
  • Dayjs by iamkun and contributors, licensed under MIT. Portions copyright 2018-present, iamkun.
  • timeago.js by Hust.cc and contributors, licensed under MIT. Portions copyright 2016 Hust.cc.
  • localForage by Matthew Riley MacPherson, Thodoris Greasidis and contributors, licensed under Apache 2.0. Portions copyright 2014 Mozilla.

sadgeclipper's People

Contributors

dylmye avatar

Stargazers

 avatar

Watchers

 avatar

sadgeclipper's Issues

(bug) Clips should open in a new window

Describe the bug
Clicking on the clip title or thumb (when embed option is off) opens the link in the current window.

To Reproduce
Click on a thumbnail or clip title

Expected behavior
Should open in a new tab (or make it an option)

Screenshots
n/a

(bug) Results aren't cleared/updated after settings are changed

Describe the bug
Some settings are rendered on searching. For example, embed and search size. Updating these should either affect the current results or clear them.

To Reproduce

  1. Change the open embed setting from No to Yes
  2. Save settings and let the settings modal close
  3. click on a thumbnail - it'll go to the clip

Expected behavior
Clear clips list or update the clips on changing settings

Screenshots
n/a

(idea) Download Clip

A button for each clip to download it.

The thumbnail from API requests looks like this: https://clips-media-assets2.twitch.tv/AT-cm%7C986061874-preview-480x272.jpg. The AT-cm|986061874 part is a ID that is also used in the clip download url: https://clips-media-assets2.twitch.tv/AT-cm%7C986089006.mp4 (source: Clipr)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo 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.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.