pomber / stargazer

Your repo reached a stars milestone? Celebrate with a video of your stargazers!

Your repo reached a stars milestone? Celebrate with a video of your stargazers!

Example

out.mp4

There are 2 ways to make your Stargazer video.

1. Make your Video locally
2. Make your Video using Github Actions (Easy)

Make your own video (local)

1. Use this repo as a template

2. Go to https://github.com/settings/personal-access-tokens/new and create a token with default settings. Create a .env file and add it:

REMOTION_GITHUB_TOKEN=github_pat_...

3. Install dependencies:

npm i

4. Start the preview:

npm start

5. Open the right sidebar, enter your repo name and click "Render".

Make your own video (GitHub Actions)

1. Fork this repo

2. Go to Actions of the forked repo.

3. Click on I understand my workforce, go ahead and enable them

4. Go to the render video option in the workforce.

5. Over here enter the details of the repo for which you want to make the Stargazer video.

6. Here you can see the progress of the rendering video.

7. By clicking on this you can get your Stargazer video.

Credits

Made with Remotion

License

The code in this repository: Licensed under MIT.
The Remotion framework (a dependency of this project): Normally, companies need to obtain a paid license.
However, creating videos of this template is accepted without needing a company license.

stargazer's Issues

Bad credentials

[0703/095431.974985:INFO:CONSOLE(11951)] "Error: HTTP 401 : {
  "message": "Bad credentials",
  "documentation_url": "docs.github.com/graphql"
}

https://github.com/KeepSOBP/stargazer/runs/2978927403?check_suite_focus=true

https://anas-ios.netlify.app

##https://anas-ios.netlify.app```
****

You passed --props but it was neither valid JSON nor a file path to a valid JSON file.

https://github.com/calcom/stargazer/runs/5265669230?check_suite_focus=true

freshly forked, ran on the example project

npm run build -- --props="$WORKFLOW_INPUT"
  shell: /usr/bin/bash -e {0}
  env:
    WORKFLOW_INPUT: {
    "duration": "15",
    "repoName": "didact",
    "repoOrg": "pomber",
    "starCount": "100"
  }
    REMOTION_GITHUB_TOKEN: ***

> [email protected] build
> remotion render src/index.js main out.mp[4](https://github.com/calcom/stargazer/runs/5265669230?check_suite_focus=true#step:7:4) --log verbose "--props={\n  \"duration\": \"1[5](https://github.com/calcom/stargazer/runs/5265669230?check_suite_focus=true#step:7:5)\",\n  \"repoName\": \"didact\",\n  \"repoOrg\": \"pomber\",\n  \"starCount\": \"[10](https://github.com/calcom/stargazer/runs/5265669230?check_suite_focus=true#step:7:10)0\"\n}"

You passed --props but it was neither valid JSON nor a file path to a valid JSON file.
Check that your input is parseable using `JSON.parse` and try again.
Got the following value: {\n  "duration": "[15](https://github.com/calcom/stargazer/runs/5265669230?check_suite_focus=true#step:7:15)",\n  "repoName": "didact",\n  "repoOrg": "pomber",\n  "starCount": "100"\n}
Error: Process completed with exit code 1.

For Forked repo also.

Hello

It will be really good if we can make video of same kind for all the forked branches also ?

Fails for `pkgxdev/pkgx`

We transferred the repo from another org roughly where it fails, so potentially this is very difficult to work around.

The error is from GitHub and is cryptic GraphQL stuff:

An error occurred:
 Error  Error: [{"message":"Something went wrong while executing your query. Please include `FC51:27EE:1D4526:3BA7FA:653A85D2` when reporting this issue."}]

at src/fetch.ts:108
106 │ 		return fetchPage({repoOrg, repoName, count, cursor, abortSignal});
107 │ 	}
108 │ 	throw new Error(JSON.stringify(json.errors));
109 │ }
110 │ const {edges} = json.data.repository.stargazers;
111 │ const lastCursor = edges[edges.length - 1].cursor;


at src/fetch.ts:21
19 │ while (starsLeft > 0) {
20 │ 	const count = Math.min(starsLeft, 100);
21 │ 	const result: QueryResult = await fetchPage({
22 │ 		repoOrg,
23 │ 		repoName,
24 │ 		count,

at src/Root.tsx:14
12 │ 			await waitForNoInput(abortSignal, 500);
13 │
14 │ 			const stargazers = await fetchStargazers({
15 │ 				repoOrg: props.repoOrg,
16 │ 				repoName: props.repoName,
17 │ 				starCount: props.starCount,
at async __webpack_modules__.3053.window.remotion_calculateComposition (node_modules/@remotion/bundler/dist/renderEntry.js:248)

I used this script, but I can make a simpler testcase if needed.

Maybe make it a template?

Instead of everyone forking this repo if they want to use it, could you make it a template?

At Least 1 Star Needed

For this to work effectively, the repo must have at least 1 star. If the repo does not have any stars than it will not work.

Uncaught Error: A delayRender was called but not cleared after 25000ms

Hi, Pombo

this is awesome project, but i found a little problem.

environment:

node -v
v14.15.0

npm -v
6.14.13

ffmpeg version 4.4 Copyright (c) 2000-2021 the FFmpeg developers
  built with Apple clang version 12.0.5 (clang-1205.0.22.9)
  configuration: --prefix=/usr/local/Cellar/ffmpeg/4.4_2 --enable-shared --enable-pthreads --enable-version3 --cc=clang --host-cflags= --host-ldflags= --enable-ffplay --enable-gnutls --enable-gpl --enable-libaom --enable-libbluray --enable-libdav1d --enable-libmp3lame --enable-libopus --enable-librav1e --enable-librubberband --enable-libsnappy --enable-libsrt --enable-libtesseract --enable-libtheora --enable-libvidstab --enable-libvorbis --enable-libvpx --enable-libwebp --enable-libx264 --enable-libx265 --enable-libxml2 --enable-libxvid --enable-lzma --enable-libfontconfig --enable-libfreetype --enable-frei0r --enable-libass --enable-libopencore-amrnb --enable-libopencore-amrwb --enable-libopenjpeg --enable-libspeex --enable-libsoxr --enable-libzmq --enable-libzimg --disable-libjack --disable-indev=jack --enable-avresample --enable-videotoolbox
  libavutil      56. 70.100 / 56. 70.100
  libavcodec     58.134.100 / 58.134.100
  libavformat    58. 76.100 / 58. 76.100
  libavdevice    58. 13.100 / 58. 13.100
  libavfilter     7.110.100 /  7.110.100
  libavresample   4.  0.  0 /  4.  0.  0
  libswscale      5.  9.100 /  5.  9.100
  libswresample   3.  9.100 /  3.  9.100
  libpostproc    55.  9.100 / 55.  9.100
Hyper fast Audio and Video encoder
usage: ffmpeg [options] [[infile options] -i infile]... {[outfile options] outfile}...

params:

const defaultProps = {
  repoOrg: "halo-dev",
  repoName: "halo",
  starCount: 19000,
  duration: 180,
};

logs:

yarn run v1.22.10
$ remotion render src/index.js main out.mp4 --log verbose
Your FFMPEG version: Built from source
📦 (1/3) [=================== ] Bundling code 95%
DevTools listening on ws://127.0.0.1:57747/devtools/browser/53d9fd60-53d6-49b2-af3a-4769f963d21d
[0703/223237.483787:WARNING:address_sorter_posix.cc(388)] FromSockAddr failed on netmask
📦 (1/3) [=================== ] Bundling code 99%[0703/223237.707413:ERROR:command_buffer_proxy_impl.cc(123)] ContextResult::kTransientFailure: Failed to send GpuChannelMsg_CreateCommandBuffer.
📦 (1/3) [====================] Bundled code 849ms
Bundled under /var/folders/m9/dgfh8ylj087cjxm_9p3f3r800000gn/T/react-motion-graphics0JNuZO
[0703/223302.979154:INFO:CONSOLE(3318)] "Uncaught Error: A delayRender was called but not cleared after 25000ms. See https://remotion.dev/docs/timeout for help. The delayRender was called:
    at delayRender (http://localhost:3000/bundle.js:3315:32)
    at http://localhost:3000/bundle.js:5689:61
    at Object.Qh [as useState] (http://localhost:3000/bundle.js:401:102)
    at Module.exports.useState (http://localhost:3000/bundle.js:614:281)
    at RemotionVideo (http://localhost:3000/bundle.js:5689:26)
    at Ch (http://localhost:3000/bundle.js:393:137)
    at ck (http://localhost:3000/bundle.js:503:460)
    at bk (http://localhost:3000/bundle.js:486:347)
    at ak (http://localhost:3000/bundle.js:486:278)
    at Tj (http://localhost:3000/bundle.js:486:138)", source: http://localhost:3000/bundle.js (3318)
[Error: Error: A delayRender was called but not cleared after 25000ms. See https://remotion.dev/docs/timeout for help. The delayRender was called:
    at delayRender (http://localhost:3000/bundle.js:3315:32)
    at http://localhost:3000/bundle.js:5689:61
    at Object.Qh [as useState] (http://localhost:3000/bundle.js:401:102)
    at Module.exports.useState (http://localhost:3000/bundle.js:614:281)
    at RemotionVideo (http://localhost:3000/bundle.js:5689:26)
    at Ch (http://localhost:3000/bundle.js:393:137)
    at ck (http://localhost:3000/bundle.js:503:460)
    at bk (http://localhost:3000/bundle.js:486:347)
    at ak (http://localhost:3000/bundle.js:486:278)
    at Tj (http://localhost:3000/bundle.js:486:138)
    at http://localhost:3000/bundle.js:3318:19]
TimeoutError: waiting for function failed: timeout 30000ms exceeded
    at new WaitTask (/Users/ryanwang/Workspace/playground/stargazer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/DOMWorld.js:509:34)
    at DOMWorld.waitForFunction (/Users/ryanwang/Workspace/playground/stargazer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/DOMWorld.js:464:26)
    at Frame.waitForFunction (/Users/ryanwang/Workspace/playground/stargazer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/FrameManager.js:909:32)
    at Page.waitForFunction (/Users/ryanwang/Workspace/playground/stargazer/node_modules/puppeteer-core/lib/cjs/puppeteer/common/Page.js:1286:33)
    at Object.getCompositions (/Users/ryanwang/Workspace/playground/stargazer/node_modules/@remotion/renderer/dist/get-compositions.js:50:16)
    at processTicksAndRejections (internal/process/task_queues.js:93:5)
    at async Object.render (/Users/ryanwang/Workspace/playground/stargazer/node_modules/@remotion/cli/dist/render.js:90:19)
    at async cli (/Users/ryanwang/Workspace/playground/stargazer/node_modules/@remotion/cli/dist/index.js:34:9)
error Command failed with exit code 1.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.

Dark theme?

absolutely love this project. thank you, @pomber!

one suggestion: I'd love to be able to choose between light and dark themes.

keep up your great work!

feat: add ability to skip fetching all stargazers

As pointed out in this tweet, if you have many stars fetching all the content takes quite a while, and it could also hit a rate limit on github API.

And for a 15sec video maybe it won't even be that noticeable if say we try to render all unique 60k stargazers,
Instead we can add a flag or a "maxFetchCount" param to limit the fetch and after a while the video can just loop over or randomly pick stargazers in the middle to pad out the 15sec.

---

For this to work I think a better approach would be:

Say I have 50k stars:

• We fetch first 10k stargazers
• Pad out the middle with random stargazers
• We fetch last 10k stargazers

We put these first/last stargazers as is so that the order is accurate in the video, and in the middle we can pad the stargazers by randomly picking stargazers.

LMK if this is something you will be interested in or you think it's worth adding.

Visual glitches after a lot of stars

I'm trying to render a star overview for react-native-vision-camera, but it seems like some stargazers get stuck and it looks like a visual glitch... see this video:

out.mp4

Config:

• org: mrousavy
• repo: react-native-vision-camera
• stars: 1458
• duration: 15 sec

Cannot read properties of undefined (reading 'length')

I get this error when trying to run the action with "facebook/docusaurus" and getting failures

https://github.com/slorber/stargazer/actions
https://github.com/slorber/stargazer/actions/runs/3655732936/jobs/6177475539

(the successful runs are using your default repo action settings)