Showing preview only (213K chars total). Download the full file or copy to clipboard to get everything.
Repository: okikio/inthistweet
Branch: main
Commit: 851617c3604e
Files: 62
Total size: 197.2 KB
Directory structure:
gitextract_igadfnhp/
├── .gitignore
├── .gitpod.yml
├── .vscode/
│ ├── extensions.json
│ └── launch.json
├── LICENSE
├── README.md
├── astro.config.ts
├── package.json
├── public/
│ ├── _headers
│ ├── _redirects
│ ├── favicon/
│ │ └── browserconfig.xml
│ ├── manifest.json
│ ├── netlify.toml
│ ├── open-search.xml
│ └── robots.txt
├── range-requests.mjs
├── repl.ts
├── src/
│ ├── components/
│ │ ├── custom-toast.svelte
│ │ ├── ffmpeg.svelte
│ │ ├── ffmpeg.ts
│ │ ├── register-sw.svelte
│ │ ├── search.svelte
│ │ ├── service-worker.ts
│ │ └── transition.ts
│ ├── env.d.ts
│ ├── layouts/
│ │ └── Layout.astro
│ ├── lib/
│ │ ├── codemirror.ts
│ │ ├── ffmpeg.ts
│ │ ├── get-tweet.ts
│ │ ├── height.ts
│ │ ├── m3u8/
│ │ │ ├── mod.ts
│ │ │ ├── parser.ts
│ │ │ ├── traverse.ts
│ │ │ ├── types.ts
│ │ │ └── urls.ts
│ │ ├── path/
│ │ │ └── mod.ts
│ │ ├── search.ts
│ │ ├── shell-lang.ts
│ │ ├── state.ts
│ │ ├── transcode.ts
│ │ ├── utils/
│ │ │ ├── chunk.ts
│ │ │ ├── debounce.ts
│ │ │ ├── diff.ts
│ │ │ └── url.ts
│ │ └── vendor/
│ │ ├── core.ts
│ │ └── worker.ts
│ ├── pages/
│ │ ├── api/
│ │ │ └── twitter/
│ │ │ └── index.ts
│ │ ├── ffmpeg.astro
│ │ └── index.astro
│ ├── scripts/
│ │ └── measure.ts
│ └── types/
│ ├── card.ts
│ ├── edit.ts
│ ├── entities.ts
│ ├── index.ts
│ ├── media.ts
│ ├── photo.ts
│ ├── tweet.ts
│ ├── user.ts
│ └── video.ts
├── tailwind.config.ts
├── tsconfig.json
└── vercel.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .gitignore
================================================
# build output
dist/
.output/
# dependencies
node_modules/
# logs
npm-debug.log*
yarn-debug.log*
yarn-error.log*
pnpm-debug.log*
# environment variables
.env
.env.production
# macOS-specific files
.DS_Store
.netlify
.vercel
================================================
FILE: .gitpod.yml
================================================
# This configuration file was automatically generated by Gitpod.
# Please adjust to your needs (see https://www.gitpod.io/docs/config-gitpod-file)
# and commit this file to your remote git repository to share the goodness with others.
tasks:
- init: pnpm install && pnpm run build
command: pnpm run start
vscode:
extensions:
- svelte.svelte-vscode
- bradlc.vscode-tailwindcss
================================================
FILE: .vscode/extensions.json
================================================
{
"recommendations": ["astro-build.astro-vscode"],
"unwantedRecommendations": []
}
================================================
FILE: .vscode/launch.json
================================================
{
"version": "0.2.0",
"configurations": [
{
"command": "./node_modules/.bin/astro dev",
"name": "Development server",
"request": "launch",
"type": "node-terminal"
}
]
}
================================================
FILE: LICENSE
================================================
MIT License
Copyright (c) 2023 Okiki Ojo
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in all
copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
SOFTWARE.
================================================
FILE: README.md
================================================
# inthistweet
[](https://stackblitz.com/github/okikio/inthistweet)
[](https://codesandbox.io/s/github/okikio/inthistweet)
[](https://www.producthunt.com/posts/in-this-tweet?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-in-this-tweet)
[](https://twitter.com/@inthistweet_dev)
<!--  -->
✨ Futuristic ✨ twitter image, gif and video downloader.
Enter a Tweet URL, click search, and download the image/videos in it to share, create a meme, and/or to store, the world is your oyester.
> **Note**: You can download images and videos for gallary tweets, quote tweets, normal image and video posts and even the preview images for links, [inthistweet.app](https://inthistweet.app) can handle it all.
[inthistweet.app](https://inthistweet.app)
## 🚀 Project Structure
Inside of your [Astro](https://astro.build) project, you'll see the following folders and files:
```
/
├── public/
│ ├── ...
│ └── favicon.svg
├── src/
│ ├── components/
│ │ └── search.svelte
│ ├── icons/
│ │ └── logo.svg
│ ├── layouts/
│ │ └── Layout.astro
│ ├── pages/
│ │ ├── api/
│ │ │ └── twitter.ts
│ │ └── index.astro
│ ├── scripts/
│ │ └── measure.ts
│ └── utils.ts
└── package.json
```
[Astro](https://astro.build) looks for `.astro` or `.md` files in the `src/pages/` directory. Each page is exposed as a route based on its file name.
There's nothing special about `src/components/`, but that's where we like to put any [Astro](https://astro.build)/React/Vue/Svelte/Preact components.
Any static assets, like images, can be placed in the `public/` directory.
## 🧞 Commands
All commands are run from the root of the project, from a terminal:
| Command | Action |
| :--------------------- | :------------------------------------------------- |
| `npm install` | Installs dependencies |
| `npm run dev` | Starts local dev server at `localhost:3000` |
| `npm run build` | Build your production site to `./dist/` |
| `npm run preview` | Preview your build locally, before deploying |
| `npm run astro ...` | Run CLI commands like `astro add`, `astro preview` |
| `npm run astro --help` | Get help using the Astro CLI |
## 👀 Want to learn more?
Feel free to check out the [Astro documentation](https://docs.astro.build) or jump into our the [Astro Discord server](https://astro.build/chat).
## License
MIT - © 2022 [Okiki Ojo](https://okikio.dev)
================================================
FILE: astro.config.ts
================================================
import { defineConfig } from 'astro/config';
// https://astro.build/config
import Icons from 'unplugin-icons/vite';
import { FileSystemIconLoader } from 'unplugin-icons/loaders';
// https://astro.build/config
import svelte from "@astrojs/svelte";
import tailwind from "@astrojs/tailwind";
import sitemap from "@astrojs/sitemap";
import serviceWorker from "astrojs-service-worker";
import adapter from "astro-auto-adapter";
import type { RangeRequestsPlugin as RangeRequestsPluginType } from "workbox-range-requests"
import RangeRequestsPlugin, { urlPattern } from './range-requests.mjs';
// https://astro.build/config
export default defineConfig({
site: "https://inthistweet.app",
integrations: [
svelte(),
tailwind(),
sitemap({ customPages: ['https://inthistweet.app/'] }),
// serviceWorker({
// // enableInDevelopment: true,
// registration: { autoRegister: true },
// // @ts-ignore
// workbox: {
// skipWaiting: true,
// clientsClaim: true,
// additionalManifestEntries: [
// "/",
// "https://inthistweet.app"
// ],
// // globDirectory: outDir,
// globPatterns: ["**/*.{html,js,css,svg,ttf,woff2,png,webp,jpg,jpeg,wasm,ico,json,xml}"], //
// ignoreURLParametersMatching: [/index\.html\?(.*)/, /\\?(.*)/],
// cleanupOutdatedCaches: true,
// // Define runtime caching rules.
// runtimeCaching: [
// {
// // Match any request that starts with https://api.producthunt.com, https://api.countapi.xyz, https://opencollective.com, etc...
// urlPattern,
// // Apply a network-first strategy.
// handler: "NetworkFirst",
// method: "GET",
// options: {
// cacheableResponse: {
// statuses: [0, 200]
// },
// plugins: [
// new RangeRequestsPlugin() as unknown as RangeRequestsPluginType
// ],
// matchOptions: {
// ignoreSearch: true,
// ignoreVary: true
// }
// }
// },
// {
// // Match any request that starts with https://api.producthunt.com, https://api.countapi.xyz, https://opencollective.com, etc...
// urlPattern:
// /(?:^https:\/\/(?:.*)\.twimg\.com)|(?:\/api\/twitter)|(?:\/take-measurement$)|(?:^https:\/\/((?:api\.producthunt\.com)|(?:api\.countapi\.xyz)|(?:opencollective\.com)|(?:giscus\.bundlejs\.com)))/,
// // Apply a network-first strategy.
// handler: "NetworkFirst",
// method: "GET",
// options: {
// cacheableResponse: {
// statuses: [0, 200]
// },
// }
// },
// {
// // Match any request that ends with .png, .jpg, .jpeg, .svg, etc....
// urlPattern:
// /workbox\-(.*)\.js|\.(?:png|jpg|jpeg|svg|webp|map|ts|wasm|css)$|^https:\/\/(?:cdn\.polyfill\.io)/,
// // Apply a stale-while-revalidate strategy.
// handler: "NetworkFirst",
// method: "GET",
// options: {
// cacheableResponse: {
// statuses: [0, 200]
// }
// }
// },
// {
// // Cache `monaco-editor` etc...
// urlPattern:
// /(?:(?:chunks|assets|favicon|fonts|giscus)\/(.*)$)/,
// // Apply a network-first strategy.
// handler: "NetworkFirst",
// method: "GET",
// options: {
// cacheableResponse: {
// statuses: [0, 200]
// },
// }
// },
// ]
// }
// })
],
output: "hybrid",
adapter: await adapter(undefined, {
"deno": {
port: 4321
}
}),
vite: {
plugins: [
Icons({
// experimental
autoInstall: true,
compiler: 'svelte',
customCollections: {
// a helper to load icons from the file system
// files under `./assets/icons` with `.svg` extension will be loaded as it's file name
// you can also provide a transform callback to change each icon (optional)
'local': FileSystemIconLoader(
'./src/icons',
svg => svg.replace(/^<svg /, '<svg fill="currentColor" '),
),
},
}),
]
}
});
================================================
FILE: package.json
================================================
{
"name": "@example/basics",
"type": "module",
"version": "0.0.1",
"private": true,
"scripts": {
"dev": "astro dev",
"start": "astro dev",
"build": "astro build",
"preview:node": "node ./dist/server/entry.mjs",
"preview:deno": "deno run --allow-net --allow-read --allow-env ./dist/server/entry.mjs",
"preview:cloudflare": "wrangler pages dev ./dist",
"preview:vercel": "vercel deploy --prebuilt",
"preview:netlify": "netlify deploy --build",
"astro": "astro"
},
"dependencies": {
"@codemirror/commands": "^6.3.3",
"@codemirror/lang-javascript": "^6.2.1",
"@codemirror/lang-json": "^6.0.1",
"@codemirror/lang-markdown": "^6.2.4",
"@codemirror/language": "^6.10.1",
"@codemirror/legacy-modes": "^6.3.3",
"@codemirror/state": "^6.4.0",
"@codemirror/theme-one-dark": "^6.1.2",
"@codemirror/view": "^6.23.1",
"@ffmpeg.wasm/core-mt": "^0.12.0",
"@ffmpeg.wasm/main": "^0.12.0",
"@fontsource-variable/inter": "^5.0.16",
"@fontsource-variable/inter-tight": "^5.0.19",
"@uiw/codemirror-extensions-hyper-link": "^4.21.21",
"astro-auto-adapter": "^2.1.0",
"codemirror": "^6.0.1",
"fluent-svelte": "^1.6.0",
"m3u-parser-generator": "^1.6.0",
"m3u8-parser": "^7.1.0",
"svelte": "^4.2.10",
"svelte-french-toast": "1.2.0",
"tailwindcss": "^3.4.1",
"unplugin-icons": "^0.18.5",
"urlpattern-polyfill": "^10.0.0",
"workbox-window": "^7.0.0",
"zod": "^3.22.4"
},
"devDependencies": {
"@astrojs/cloudflare": "9.0.0",
"@astrojs/deno": "5.0.1",
"@astrojs/netlify": "5.0.1",
"@astrojs/node": "8.2.0",
"@astrojs/sitemap": "^3.0.5",
"@astrojs/svelte": "^5.0.3",
"@astrojs/tailwind": "^5.1.0",
"@astrojs/vercel": "7.1.1",
"@fastify/middie": "^8.3.0",
"@fastify/static": "^7.0.0",
"@iconify-json/file-icons": "^1.1.8",
"@iconify-json/fluent": "^1.1.47",
"@iconify-json/fluent-emoji": "^1.1.18",
"@iconify-json/mdi": "^1.1.64",
"astro": "4.3.3",
"astrojs-service-worker": "^2.0.0",
"esno": "^4.0.0",
"fastify": "^4.26.0",
"sass": "^1.70.0",
"workbox-core": "^7.0.0",
"workbox-range-requests": "^7.0.0"
}
}
================================================
FILE: public/_headers
================================================
/*
X-Frame-Options: SAMEORIGIN
X-Content-Type-Options: nosniff
X-XSS-Protection: 1; mode=block
Referrer-Policy: strict-origin-when-cross-origin
Strict-Transport-Security: max-age=0
Cache-Control: max-age=480, stale-while-revalidate=360, public
Accept-CH: DPR, Viewport-Width, Width
X-UA-Compatible: IE=edge
Content-Security-Policy: default-src 'self'; font-src 'self' https://fonts.gstatic.com; style-src 'self' 'unsafe-inline'; img-src 'self' https://api.producthunt.com data: blob: https:; script-src 'self' https://*.bundlejs.com https://bundlejs.com 'unsafe-eval' 'unsafe-inline' blob: https://vercel.live; connect-src 'self' https: blob: data:; block-all-mixed-content; upgrade-insecure-requests; base-uri 'self'; object-src 'none'; worker-src 'self' blob:; manifest-src 'self'; media-src 'self' https: data: blob:; form-action 'self'; frame-src 'self'; frame-ancestors 'self' https:;
Permissions-Policy: sync-xhr=(self)
/
Cross-Origin-Opener-Policy: unsafe-none
Cross-Origin-Embedder-Policy: unsafe-none
Link: <https://video.twimg.com/>; rel=preconnect
Link: <https://pbs.twimg.com/>; rel=preconnect
Link: <https://video.twimg.com/ext_tw_video/1585341912877146112/pu/vid/1920x1080/aeoVUvTgj4wHShhN.mp4>; rel=preload; as=video; crossorigin=anonymous
/ffmpeg
Cross-Origin-Opener-Policy: same-origin
Cross-Origin-Embedder-Policy: require-corp
================================================
FILE: public/_redirects
================================================
/take-measurement https://analytics.bundlejs.com/api/collect 200
================================================
FILE: public/favicon/browserconfig.xml
================================================
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square150x150logo src="/favicon/mstile-150x150.png"/>
<TileColor>#232323</TileColor>
</tile>
</msapplication>
</browserconfig>
================================================
FILE: public/manifest.json
================================================
{
"name": "In this tweet",
"short_name": "In this tweet",
"id": "inthistweet",
"start_url": "/?utm_source=pwa",
"scope": "/",
"dir": "ltr",
"display": "standalone",
"author": "@okikio",
"theme_color": "#232323",
"background_color": "#232323",
"description": "✨ Futuristic ✨ twitter image, video, and gif downloader and FFmpeg video conversion playground, m3u8 to mp4, webm to mp4, mp4 to gif, etc... Enter a Tweet URL, click search, and download the images and videos in it.",
"icons": [
{
"src": "/favicon/favicon.svg",
"sizes": "any",
"type": "image/svg+xml",
"purpose": "any"
},
{
"src": "/favicon/maskable_icon_x192.png",
"sizes": "192x192",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/favicon/maskable_icon_x512.png",
"sizes": "512x512",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/favicon/maskable_icon.png",
"sizes": "1024x1024",
"type": "image/png",
"purpose": "maskable"
},
{
"src": "/favicon/android-chrome-192x192.png",
"sizes": "192x192",
"type": "image/png"
},
{
"src": "/favicon/android-chrome-512x512.png",
"sizes": "512x512",
"type": "image/png"
}
],
"lang": "en",
"screenshots": [
{
"src": "/screenshot-mobile-1.png",
"type": "image/png",
"sizes": "1082x2400",
"form_factor": "narrow"
},
{
"src": "/screenshot-mobile-2.png",
"type": "image/png",
"sizes": "1082x2400",
"form_factor": "narrow"
},
{
"src": "/screenshot-desktop-1.png",
"type": "image/png",
"sizes": "3206x2184",
"form_factor": "wide"
},
{
"src": "/screenshot-desktop-2.png",
"type": "image/png",
"sizes": "3206x2184",
"form_factor": "wide"
}
],
"share_target": {
"url_template": "/?q={q}&utm_source=share",
"action": "/",
"method": "GET",
"enctype": "application/x-www-form-urlencoded",
"params": {
"text": "q"
}
},
"orientation": "natural",
"categories": [
"productivity",
"utility",
"text",
"social",
"photo",
"photo & video",
"video",
"multimedia",
"developer tools"
]
}
================================================
FILE: public/netlify.toml
================================================
[functions]
directory = "dist/functions"
================================================
FILE: public/open-search.xml
================================================
<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>inthistweet</ShortName>
<Description>Quick and easy twitter image/video downloader. Enter a Tweet URL...</Description>
<Image width="64" height="64" type="image/png">https://inthistweet.app/favicon/favicon_x64.png</Image>
<InputEncoding>UTF-8</InputEncoding>
<Contact>hey@okikio.dev</Contact>
<Url type="text/html" template="https://inthistweet.app/?q={searchTerms}&utm_source=search"/>
<moz:SearchForm>https://inthistweet.app</moz:SearchForm>
</OpenSearchDescription>
================================================
FILE: public/robots.txt
================================================
Sitemap: https://inthistweet.app/sitemap-index.xml
User-agent: *
Allow: /
================================================
FILE: range-requests.mjs
================================================
/*
* This method throws if the supplied value is not an array.
* The destructed values are required to produce a meaningful error for users.
* The destructed and restructured object is so it's clear what is
* needed.
*/
const isArray = (value, details) => {
if (!Array.isArray(value)) {
throw (({ moduleName, className, funcName, paramName }) => {
if (!moduleName || !className || !funcName || !paramName) {
throw new Error(`Unexpected input to 'not-an-array' error.`);
}
return (`The parameter '${paramName}' passed into ` +
`'${moduleName}.${className}.${funcName}()' must be an array.`);
})(details);
}
};
const hasMethod = (object, expectedMethod, details) => {
const type = typeof object[expectedMethod];
if (type !== 'function') {
details['expectedMethod'] = expectedMethod;
throw (({ expectedMethod, paramName, moduleName, className, funcName, }) => {
if (!expectedMethod ||
!paramName ||
!moduleName ||
!className ||
!funcName) {
throw new Error(`Unexpected input to 'missing-a-method' error.`);
}
return (`${moduleName}.${className}.${funcName}() expected the ` +
`'${paramName}' parameter to expose a '${expectedMethod}' method.`);
})(details);
}
};
const isType = (object, expectedType, details) => {
if (typeof object !== expectedType) {
details['expectedType'] = expectedType;
throw (({ paramName, moduleName, className, funcName, }) => {
if (!expectedType || !paramName || !moduleName || !funcName) {
throw new Error(`Unexpected input to 'incorrect-type' error.`);
}
const classNameStr = className ? `${className}.` : '';
return (`The parameter '${paramName}' passed into ` +
`'${moduleName}.${classNameStr}` +
`${funcName}()' must be of type ${expectedType}.`);
})(details);
}
};
const isInstance = (object,
// Need the general type to do the check later.
// eslint-disable-next-line @typescript-eslint/ban-types
expectedClass, details) => {
if (!(object instanceof expectedClass)) {
details['expectedClassName'] = expectedClass.name;
throw (({ expectedClassName, paramName, moduleName, className, funcName, isReturnValueProblem, }) => {
if (!expectedClassName || !moduleName || !funcName) {
throw new Error(`Unexpected input to 'incorrect-class' error.`);
}
const classNameStr = className ? `${className}.` : '';
if (isReturnValueProblem) {
return (`The return value from ` +
`'${moduleName}.${classNameStr}${funcName}()' ` +
`must be an instance of class ${expectedClassName}.`);
}
return (`The parameter '${paramName}' passed into ` +
`'${moduleName}.${classNameStr}${funcName}()' ` +
`must be an instance of class ${expectedClassName}.`);
})(details);
}
};
const isOneOf = (value, validValues, details) => {
if (!validValues.includes(value)) {
details['validValueDescription'] = `Valid values are ${JSON.stringify(validValues)}.`;
throw (({ paramName, validValueDescription, value }) => {
if (!paramName || !validValueDescription) {
throw new Error(`Unexpected input to 'invalid-value' error.`);
}
return (`The '${paramName}' parameter was given a value with an ` +
`unexpected value. ${validValueDescription} Received a value of ` +
`${JSON.stringify(value)}.`);
})(details);
}
};
const isArrayOfClass = (value,
// Need general type to do check later.
expectedClass, // eslint-disable-line
details) => {
const error = (({ value, moduleName, className, funcName, paramName, }) => {
return (`The supplied '${paramName}' parameter must be an array of ` +
`'${expectedClass}' objects. Received '${JSON.stringify(value)},'. ` +
`Please check the call to ${moduleName}.${className}.${funcName}() ` +
`to fix the issue.`);
})(details);
if (!Array.isArray(value)) {
throw error;
}
for (const item of value) {
if (!(item instanceof expectedClass)) {
throw error;
}
}
};
const assert = process.env.NODE_ENV === 'production'
? null
: {
hasMethod,
isArray,
isInstance,
isOneOf,
isType,
isArrayOfClass,
};
const logger = (process.env.NODE_ENV === 'production'
? null
: (() => {
// Don't overwrite this value if it's already set.
// See https://github.com/GoogleChrome/workbox/pull/2284#issuecomment-560470923
if (!('__WB_DISABLE_DEV_LOGS' in globalThis)) {
// @ts-ignore
globalThis.__WB_DISABLE_DEV_LOGS = false;
}
let inGroup = false;
const methodToColorMap = {
debug: `#7f8c8d`,
log: `#2ecc71`,
warn: `#f39c12`,
error: `#c0392b`,
groupCollapsed: `#3498db`,
groupEnd: null, // No colored prefix on groupEnd
};
const print = function (method, args) {
// @ts-ignore
if (globalThis.__WB_DISABLE_DEV_LOGS) {
return;
}
if (method === 'groupCollapsed') {
// Safari doesn't print all console.groupCollapsed() arguments:
// https://bugs.webkit.org/show_bug.cgi?id=182754
if (/^((?!chrome|android).)*safari/i.test(navigator.userAgent)) {
// @ts-ignore
console[method](...args);
return;
}
}
const styles = [
`background: ${methodToColorMap[method]}`,
`border-radius: 0.5em`,
`color: white`,
`font-weight: bold`,
`padding: 2px 0.5em`,
];
// When in a group, the workbox prefix is not displayed.
const logPrefix = inGroup ? [] : ['%cworkbox', styles.join(';')];
// @ts-ignore
console[method](...logPrefix, ...args);
if (method === 'groupCollapsed') {
inGroup = true;
}
if (method === 'groupEnd') {
inGroup = false;
}
};
// eslint-disable-next-line @typescript-eslint/ban-types
const api = {};
const loggerMethods = Object.keys(methodToColorMap);
for (const key of loggerMethods) {
const method = key;
api[method] = (...args) => {
print(method, args);
};
}
return api;
})());
/**
* @param {string} rangeHeader A Range: header value.
* @return {Object} An object with `start` and `end` properties, reflecting
* the parsed value of the Range: header. If either the `start` or `end` are
* omitted, then `null` will be returned.
*
* @private
*/
export function parseRangeHeader(rangeHeader) {
const normalizedRangeHeader = rangeHeader.trim().toLowerCase();
if (!normalizedRangeHeader.startsWith('bytes=')) {
throw (({ normalizedRangeHeader }) => {
if (!normalizedRangeHeader) {
throw new Error(`Unexpected input to 'unit-must-be-bytes' error.`);
}
return (`The 'unit' portion of the Range header must be set to 'bytes'. ` +
`The Range header provided was "${normalizedRangeHeader}"`)
})({ normalizedRangeHeader });
}
// Specifying multiple ranges separate by commas is valid syntax, but this
// library only attempts to handle a single, contiguous sequence of bytes.
// https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Range#Syntax
if (normalizedRangeHeader.includes(',')) {
throw (({ normalizedRangeHeader }) => {
if (!normalizedRangeHeader) {
throw new Error(`Unexpected input to 'single-range-only' error.`);
}
return (`Multiple ranges are not supported. Please use a single start ` +
`value, and optional end value. The Range header provided was ` +
`"${normalizedRangeHeader}"`);
})({ normalizedRangeHeader });
}
const rangeParts = /(\d*)-(\d*)/.exec(normalizedRangeHeader);
// We need either at least one of the start or end values.
if (!rangeParts || !(rangeParts[1] || rangeParts[2])) {
throw (({ normalizedRangeHeader }) => {
if (!normalizedRangeHeader) {
throw new Error(`Unexpected input to 'invalid-range-values' error.`);
}
return (`The Range header is missing both start and end values. At least ` +
`one of those values is needed. The Range header provided was ` +
`"${normalizedRangeHeader}"`);
})({ normalizedRangeHeader });
}
return {
start: rangeParts[1] === '' ? undefined : Number(rangeParts[1]),
end: rangeParts[2] === '' ? undefined : Number(rangeParts[2]),
};
}
/**
* @param {Blob} blob A source blob.
* @param {number} [start] The offset to use as the start of the
* slice.
* @param {number} [end] The offset to use as the end of the slice.
* @return {Object} An object with `start` and `end` properties, reflecting
* the effective boundaries to use given the size of the blob.
*
* @private
*/
export function calculateEffectiveBoundaries(blob, start, end) {
if (process.env.NODE_ENV !== 'production') {
assert.isInstance(blob, Blob, {
moduleName: 'workbox-range-requests',
funcName: 'calculateEffectiveBoundaries',
paramName: 'blob',
});
}
const blobSize = blob.size;
if ((end && end > blobSize) || (start && start < 0)) {
throw ((start, end, size ) => {
return (`The start (${start}) and end (${end}) values in the Range are ` +
`not satisfiable by the cached response, which is ${size} bytes.`);
})({ start, end, size: blobSize });
}
let effectiveStart;
let effectiveEnd;
if (start !== undefined && end !== undefined) {
effectiveStart = start;
// Range values are inclusive, so add 1 to the value.
effectiveEnd = end + 1;
}
else if (start !== undefined && end === undefined) {
effectiveStart = start;
effectiveEnd = blobSize;
}
else if (end !== undefined && start === undefined) {
effectiveStart = blobSize - end;
effectiveEnd = blobSize;
}
return {
start: effectiveStart,
end: effectiveEnd,
};
}
/**
* Given a `Request` and `Response` objects as input, this will return a
* promise for a new `Response`.
*
* If the original `Response` already contains partial content (i.e. it has
* a status of 206), then this assumes it already fulfills the `Range:`
* requirements, and will return it as-is.
*
* @param {Request} request A request, which should contain a Range:
* header.
* @param {Response} originalResponse A response.
* @return {Promise<Response>} Either a `206 Partial Content` response, with
* the response body set to the slice of content specified by the request's
* `Range:` header, or a `416 Range Not Satisfiable` response if the
* conditions of the `Range:` header can't be met.
*
* @memberof workbox-range-requests
*/
export async function createPartialResponse(request, originalResponse) {
try {
if (originalResponse.status === 206) {
// If we already have a 206, then just pass it through as-is;
// see https://github.com/GoogleChrome/workbox/issues/1720
return originalResponse;
}
const rangeHeader = request.headers.get('range');
if (!rangeHeader) {
throw (() => {
return `No Range header was found in the Request provided.`;
})();
}
const boundaries = parseRangeHeader(rangeHeader);
const originalBlob = await originalResponse.blob();
const effectiveBoundaries = calculateEffectiveBoundaries(originalBlob, boundaries.start, boundaries.end);
const slicedBlob = originalBlob.slice(effectiveBoundaries.start, effectiveBoundaries.end);
const slicedBlobSize = slicedBlob.size;
const slicedResponse = new Response(slicedBlob, {
// Status code 206 is for a Partial Content response.
// See https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/206
status: 206,
statusText: 'Partial Content',
headers: originalResponse.headers,
});
slicedResponse.headers.set('Content-Length', String(slicedBlobSize));
slicedResponse.headers.set('Content-Range', `bytes ${effectiveBoundaries.start}-${effectiveBoundaries.end - 1}/` +
`${originalBlob.size}`);
return slicedResponse;
}
catch (error) {
if (process.env.NODE_ENV !== 'production') {
logger.warn(`Unable to construct a partial response; returning a ` +
`416 Range Not Satisfiable response instead.`);
logger.groupCollapsed(`View details here.`);
logger.log(error);
logger.log(request);
logger.log(originalResponse);
logger.groupEnd();
}
return new Response('', {
status: 416,
statusText: 'Range Not Satisfiable',
});
}
}
/**
* The range request plugin makes it easy for a request with a 'Range' header to
* be fulfilled by a cached response.
*
* It does this by intercepting the `cachedResponseWillBeUsed` plugin callback
* and returning the appropriate subset of the cached response body.
*
* @memberof workbox-range-requests
*/
export default class RangeRequestsPlugin {
/**
* @param {Object} options
* @param {Request} options.request The original request, which may or may not
* contain a Range: header.
* @param {Response} options.cachedResponse The complete cached response.
* @return {Promise<Response>} If request contains a 'Range' header, then a
* new response with status 206 whose body is a subset of `cachedResponse` is
* returned. Otherwise, `cachedResponse` is returned as-is.
*
* @private
*/
cachedResponseWillBeUsed = async ({
request,
cachedResponse,
}) => {
// Only return a sliced response if there's something valid in the cache,
// and there's a Range: header in the request.
if (cachedResponse && request.headers.has('range')) {
return await createPartialResponse(request, cachedResponse);
}
// If there was no Range: header, or if cachedResponse wasn't valid, just
// pass it through as-is.
return cachedResponse;
};
}
export function urlPattern({ request }) {
const { destination } = request;
return destination === 'video' || destination === 'audio';
}
================================================
FILE: repl.ts
================================================
// const json = await (await fetch("https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FCharlesPattson%2Fstatus%2F1697322795510759929&partner=&hide_thread=false")).json();
// https://cdn.syndication.twimg.com/tweet-result?features=tfw_timeline_list:;tfw_follower_count_sunset:true;tfw_tweet_edit_backend:on;tfw_refsrc_session:on;tfw_fosnr_soft_interventions_enabled:on;tfw_mixed_media_15897:treatment;tfw_experiments_cookie_expiration:1209600;tfw_show_birdwatch_pivots_enabled:on;tfw_duplicate_scribes_to_settings:on;tfw_use_profile_image_shape_enabled:on;tfw_video_hls_dynamic_manifests_15082:true_bitrate;tfw_legacy_timeline_sunset:true;tfw_tweet_edit_frontend:on&id=1697322795510759929&lang=en&token=444aooo9l2p&t8n1my=1aelk268vkd6&jn4oy2=8u9sk80svd23&wyo0fg=az18l82li41u&jtfsbw=ml8o7k16vky&it05xq=usii8m1tw0cd&35hnfy=80jor8y168vl&pplbo6=3qx25o8mtbgy&n8mica=p5a08ccc6lj
const json = await(await fetch("https://cdn.syndication.twimg.com/tweet-result?id=1697322795510759929&lang=en&token=5")).json();
/*
=1aelk268vkd6&jn4oy2=8u9sk80svd23&wyo0fg=az18l82li41u&jtfsbw=ml8o7k16vky&it05xq=usii8m1tw0cd&35hnfy=80jor8y168vl&pplbo6=3qx25o8mtbgy&n8mica=p5a08ccc6lj
*/
console.log({
json
})
================================================
FILE: src/components/custom-toast.svelte
================================================
<script>
import toast_ from 'svelte-french-toast';
import { resolveValue, LoaderIcon, CheckmarkIcon, ErrorIcon } from 'svelte-french-toast';
import FluentDismiss24Regular from "~icons/fluent/dismiss-24-regular";
import FluentArrowClockwise24Regular from '~icons/fluent/arrow-clockwise-24-regular';
export const prefersReducedMotion = (() => {
// Cache result
let shouldReduceMotion;
return () => {
if (shouldReduceMotion === undefined && typeof window !== 'undefined') {
const mediaQuery = matchMedia('(prefers-reduced-motion: reduce)');
shouldReduceMotion = !mediaQuery || mediaQuery.matches;
}
return shouldReduceMotion;
};
})();
export let toast;
export let position = undefined;
export let style = '';
export let Component = undefined;
let factor;
let animation;
$: {
const top = (toast.position || position || 'top-center').includes('top');
factor = top ? 1 : -1;
const [enter, exit] = prefersReducedMotion() ? ['fadeIn', 'fadeOut'] : ['enter', 'exit'];
animation = toast.visible ? enter : exit;
}
const toastBarBase = `
display: flex;
align-items: center;
pointer-events: auto;
line-height: 1.3;
will-change: transform;
`;
const messageContainer = `
display: flex;
align-items: center;
flex: 1 1 auto;
margin: 4px 10px;
white-space: pre-line;
`;
const iconContainer = `
flex-shrink: 0px;
min-width: 20px;
min-height: 20px;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
`;
</script>
<div
class="{toast.height ? animation : 'opacity-0'} {toast.className || ''}"
data-type={toast.toastType}
style="{style}; {toastBarBase} {toast.style}"
style:--factor={factor}
>
{#if toast.icon}
<div style={iconContainer} class="icon-container">{toast.icon}</div>
{:else if toast.toastType === 'loading'}
<div style={iconContainer} class="icon-container">
<LoaderIcon {...toast.iconTheme} />
</div>
{:else if toast.toastType === 'success'}
<div style={iconContainer} class="icon-container">
<CheckmarkIcon {...toast.iconTheme} />
</div>
{:else if toast.toastType === 'error'}
<div style={iconContainer}>
<ErrorIcon {...toast.iconTheme} />
</div>
{/if}
<div style={messageContainer} {...toast.ariaProps}>
{resolveValue(toast.messageStr, toast)}
</div>
<div class="flex gap-1.5">
{#if toast.toastType === 'update'}
<button
type="button"
class="reload-button"
aria-label="Reload"
on:click={toast?.updateClick}
>
<FluentArrowClockwise24Regular />
</button>
{/if}
<button
type="button"
class="cancel-button"
aria-label="Dismiss"
on:click={(e) => {
if (typeof toast?.dismissClick == "function")
toast?.dismissClick?.(e);
toast_.dismiss(toast.id);
}}
>
<FluentDismiss24Regular />
</button>
</div>
</div>
<style lang="scss" global>
.toaster .wrapper .message {
pointer-events: none;
justify-content: end;
width: 100%;
}
.toast {
will-change: transform;
box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1), 0 3px 3px rgba(0, 0, 0, 0.05);
max-width: min(350px, 100%);
@apply sm:max-w-[450px] w-full;
// transition-property: background-color, border-color, text-decoration-color,
// fill, stroke;
// @apply transition-colors duration-300;
@apply bg-blue-100/90 dark:bg-elevated/70;
@apply backdrop-blur-lg rounded-full;
@apply w-[350px];
@apply pl-4 pr-2 py-2;
@apply border-2 border-dashed border-secondary dark:border-slate-700;
.reload-button,
.cancel-button {
@apply scale-100 hover:scale-110 active:scale-90;
@apply rounded-full;
@apply bg-secondary/20 p-2;
}
&[data-type="error"] {
@apply bg-red-100/90 dark:bg-red-700/30;
@apply border-red-300 dark:border-red-700;
.icon-container svg path {
@apply stroke-red-200 dark:stroke-red-900;
}
.cancel-button {
@apply text-red-800 dark:text-red-200;
@apply bg-red-300/90 dark:bg-red-200/30;
}
}
&[data-type="success"] {
@apply bg-green-200/90 dark:bg-green-700/30;
@apply border-green-400 dark:border-green-700;
.icon-container svg path {
@apply stroke-green-200 dark:stroke-green-900;
}
.cancel-button {
@apply text-green-800 dark:text-green-200;
@apply bg-green-400/70 dark:bg-green-200/30;
}
}
&[data-type="loading"] {
@apply bg-gray-100/90 dark:bg-blue-700/30;
@apply border-gray-400 dark:border-blue-700;
.loading-circle {
@apply stroke-slate-300;
}
.cancel-button {
@apply text-gray-800 dark:text-blue-200;
@apply bg-gray-300/90 dark:bg-blue-200/30;
}
}
&[data-type="update"] {
@apply bg-yellow-100/90 dark:bg-yellow-700/30;
@apply border-yellow-400 dark:border-yellow-700;
@apply lt-sm:flex-col gap-1.5;
@apply lt-sm:rounded-xl;
.loading-circle {
@apply stroke-yellow-300;
}
.reload-button,
.cancel-button {
@apply text-yellow-800 dark:text-yellow-200;
@apply bg-yellow-300/90 dark:bg-yellow-200/30;
&:hover {
@apply bg-yellow-400/90 dark:bg-yellow-700/40;
}
}
}
}
@-webkit-keyframes enterAnimation {
0% {
transform: translate3d(0, calc(var(--factor) * -200%), 0) scale(0.6);
opacity: 0.5;
}
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
}
@keyframes enterAnimation {
0% {
transform: translate3d(0, calc(var(--factor) * -200%), 0) scale(0.6);
opacity: 0.5;
}
100% {
transform: translate3d(0, 0, 0) scale(1);
opacity: 1;
}
}
@-webkit-keyframes exitAnimation {
0% {
transform: translate3d(0, 0, -1px) scale(1);
opacity: 1;
}
100% {
transform: translate3d(0, calc(var(--factor) * -150%), -1px) scale(0.6);
opacity: 0;
}
}
@keyframes exitAnimation {
0% {
transform: translate3d(0, 0, -1px) scale(1);
opacity: 1;
}
100% {
transform: translate3d(0, calc(var(--factor) * -150%), -1px) scale(0.6);
opacity: 0;
}
}
@-webkit-keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@keyframes fadeInAnimation {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
@-webkit-keyframes fadeOutAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
@keyframes fadeOutAnimation {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
.enter {
-webkit-animation: enterAnimation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
animation: enterAnimation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.exit {
-webkit-animation: exitAnimation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
animation: exitAnimation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
}
.fadeIn {
-webkit-animation: fadeInAnimation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
animation: fadeInAnimation 0.35s cubic-bezier(0.21, 1.02, 0.73, 1) forwards;
}
.fadeOut {
-webkit-animation: fadeOutAnimation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
animation: fadeOutAnimation 0.4s cubic-bezier(0.06, 0.71, 0.55, 1) forwards;
}
</style>
================================================
FILE: src/components/ffmpeg.svelte
================================================
<script lang="ts">
import type { ViewUpdate } from "@codemirror/view";
import type { ChangeSpec } from "@codemirror/state";
import type { FFmpeg } from "@ffmpeg.wasm/main";
import { traverseM3U8Manifests } from "../lib/m3u8/traverse";
import { writable } from "svelte/store";
import { blur } from 'svelte/transition';
import {
InfoBar,
Button,
TextBlock,
TextBox,
TextBoxButton,
Expander,
} from "fluent-svelte";
import FluentDismiss24Regular from "~icons/fluent/dismiss-24-regular";
import FluentSearch24Regular from "~icons/fluent/search-24-regular";
import FluentOpen24Regular from "~icons/fluent/open-24-regular";
import FluentFolder24Regular from "~icons/fluent/folder-24-regular";
import FluentFolder24Filled from "~icons/fluent/folder-24-filled";
import FluentRecord24Filled from "~icons/fluent/record-stop-24-filled";
import FluentPlay24Filled from '~icons/fluent/play-24-filled';
import { createFFmpeg, fetchFile, diff, shell, debounce } from "./ffmpeg";
import { extname } from "../lib/path/mod"
import { hyperLink } from '@uiw/codemirror-extensions-hyper-link';
import { oneDark, color } from "@codemirror/theme-one-dark";
import { indentWithTab } from "@codemirror/commands";
import { json } from "@codemirror/lang-json";
import { markdown } from "@codemirror/lang-markdown";
import { StreamLanguage } from "@codemirror/language";
import { EditorView, scrollPastEnd, keymap } from "@codemirror/view";
import { basicSetup } from "codemirror";
import { onMount } from "svelte";
interface FFmpegConfig {
args: string[],
inFilename: string,
outFilename: string,
mediaType: string,
forceUseArgs: string[] | null,
}
const ffmpegDefaultOpts: FFmpegConfig = {
args: ['-c:v', 'libx264'],
inFilename: 'video.avi',
outFilename: 'video.mp4',
mediaType: 'video/mp4',
forceUseArgs: null,
}
const emptyConsole = "No Logs...";
let ffmpegOpts = Object.assign({}, ffmpegDefaultOpts);
let ffmpeg: FFmpeg;
let editorView: EditorView;
let consoleView: EditorView;
let searchInputEl: HTMLInputElement;
let openInputEl: HTMLInputElement;
let editorEl: HTMLElement;
let consoleEl: HTMLElement;
let el: HTMLElement;
$: heightStore = syncHeight(el);
let abortCtlr = new AbortController();
export let value = "";
let progress = writable(0);
let loading = writable(false);
let initializing = writable(false);
let fileOpenMode = false;
let results: Array<{ type?: string | null; url?: string | null }> = [];
let error = writable<string | null>(null);
let resultsDep = writable<Array<{ type?: string | null; url?: string | null }>>([]);
const samples = new Map([
["webm -> mp4", {
args: ['-c:v', 'libvpx'],
inFilename: 'video.webm',
outFilename: 'video.mp4',
mediaType: 'video/mp4',
forceUseArgs: null,
}],
["avi -> mp4", {
args: ['-c:v', 'libx264'],
inFilename: 'video.avi',
outFilename: 'video.mp4',
mediaType: 'video/mp4',
forceUseArgs: null,
}],
["mov -> mp4", {
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: 'video.mov',
outFilename: 'video.mp4',
mediaType: 'video/mp4',
forceUseArgs: null,
}],
["wmv -> mp4", {
args: [],
inFilename: 'video.wmv',
outFilename: 'video.mp4',
mediaType: 'video/mp4',
forceUseArgs: null,
}],
["avi -> webm", {
args: ['-c:v', 'libvpx'],
inFilename: 'video.avi',
outFilename: 'video.webm',
mediaType: 'video/webm',
forceUseArgs: null,
}],
["mp4 -> wmv", {
args: [],
inFilename: 'video.mp4',
outFilename: 'video.wmv',
mediaType: 'video/x-ms-wmv',
forceUseArgs: null,
}],
["gif -> mp4", {
args: [
"-movflags",
"faststart",
"-pix_fmt",
"yuv420p",
"-vf",
"scale=trunc(iw/2)*2:trunc(ih/2)*2"
],
inFilename: 'video.gif',
outFilename: 'image.mp4',
mediaType: 'video/mp4',
forceUseArgs: null,
}],
["mp4 -> gif", {
args: [],
inFilename: 'video.mp4',
outFilename: 'image.gif',
mediaType: 'image/gif',
forceUseArgs: null,
}],
["mp3 -> mp4", {
args: ['-c:v', 'libvpx'],
inFilename: 'audio.mp3',
outFilename: 'video.mp4',
mediaType: 'video/mp4',
forceUseArgs: null,
}],
["wav -> mp3", {
args: ['-c:a', 'libmp3lame'],
inFilename: 'audio.wav',
outFilename: 'audio.mp3',
mediaType: 'audio/mpeg',
forceUseArgs: null,
}],
["mp4 -> mov", {
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: 'video.mp4',
outFilename: 'video.mov',
mediaType: 'video/quicktime',
forceUseArgs: null,
}],
["mp4 -> mkv", {
"args": ["-c:v", "libvpx", "-c:a", "libvorbis"],
"inFilename": "video.mp4",
"outFilename": "video.mkv",
"mediaType": "video/x-matroska",
forceUseArgs: null,
}],
["mp4 -> ogg", {
"args": ["-c:a", "libvorbis"],
"inFilename": "video.mp4",
"outFilename": "audio.ogg",
"mediaType": "audio/ogg",
forceUseArgs: null,
}],
["webm -> mkv", {
"args": ["-c:v", "copy", "-c:a", "flac"],
"inFilename": "video.webm",
"outFilename": "video.mkv",
"mediaType": "video/x-matroska",
forceUseArgs: null,
}],
["mp3 -> ogg", {
"args": ["-c:a", "libvorbis"],
"inFilename": "audio.mp3",
"outFilename": "audio.ogg",
"mediaType": "audio/ogg",
forceUseArgs: null,
}],
["mp3 -> wav", {
args: ['-c:a', 'libmp3lame'],
inFilename: 'audio.mp3',
outFilename: 'audio.wav',
mediaType: 'video/x-ms-wmv',
forceUseArgs: null,
}],
["mp4 -> mp3", {
args: ['-c:a', 'libmp3lame'],
inFilename: 'video.mp4',
outFilename: 'audio.mp3',
mediaType: 'audio/mpeg',
forceUseArgs: null,
}],
["webm -> gif", {
args: [
"-crf",
"20",
"-movflags",
"faststart",
],
inFilename: 'video.webm',
outFilename: 'image.gif',
mediaType: 'image/gif',
forceUseArgs: null,
}],
["gif -> webm", {
args: [
"-c:v",
"vp8",
"-quality",
"good",
"-movflags",
"faststart",
"-pix_fmt",
"yuv420p",
"-crf",
"30"
],
inFilename: 'image.gif',
outFilename: 'video.webm',
mediaType: 'video/webm',
forceUseArgs: null,
}],
["mp4 -> webm", {
args: "-c:v libvpx".split(" "),
inFilename: 'video.mp4',
outFilename: 'video.webm',
mediaType: 'video/webm',
forceUseArgs: null,
}],
["mp4 -> avi", {
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: 'video.mp4',
outFilename: 'video.avi',
mediaType: 'video/x-msvideo',
forceUseArgs: null,
}],
["webm -> avi", {
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: 'video.webm',
outFilename: 'video.avi',
mediaType: 'video/x-msvideo',
forceUseArgs: null,
}],
["m3u8 -> mp4", {
// args: ["-c", "copy", "-bsf:a", "aac_adtstoasc"],
inFilename: 'video.m3u8',
outFilename: 'video.mp4',
mediaType: 'video/mp4',
"forceUseArgs": [
"-protocol_whitelist",
"file,http,https,tcp,tls,crypto",
"-i",
"video.m3u8",
"-c",
"copy",
"-bsf:a",
"aac_adtstoasc",
"video.mp4"
]
}],
["mp4 -> m3u8", {
args: "-b:v 1M -g 60 -hls_time 2 -hls_list_size 0 -hls_segment_size 500000".split(" "),
inFilename: 'video.mp4',
outFilename: 'video.m3u8',
mediaType: 'vnd.apple.mpegURL',
}],
["mp4 -> ts", {
args: [
"-c:v",
"mpeg2video",
"-qscale:v",
"2",
"-c:a",
"mp2",
"-b:a",
"192k"
],
inFilename: 'video.mp4',
outFilename: 'video.ts',
mediaType: 'video/mp2t',
}]
])
$: samplesArr = Array.from(samples.entries())
let downloads: string[] = []
resultsDep.subscribe((arr) => {
const pathname = new URL(value, "https://inthistweet.app").pathname.slice(1);
const ext = extname(ffmpegOpts.outFilename);
const extValue = extname(pathname);
downloads = arr.map((x) => {
return pathname ? (pathname + (extValue === ext ? "" : ext)) : ("file-to-download" + ext)
})
})
globalThis?.addEventListener?.("popstate", (event) => {
const url = new URL(globalThis.location.href);
value = url.searchParams.get("q") ?? "";
if (url.searchParams.get("config")) {
try {
ffmpegOpts = JSON.parse(url.searchParams.get("config") ?? "{}");
} catch (e) {
console.warn("Bad JSON for ffmpeg config");
ffmpegOpts = Object.assign({}, ffmpegDefaultOpts);
}
}
});
let scrollPos = 0;
let sticky = true;
onMount(() => {
consoleView = new EditorView({
doc: emptyConsole,
extensions: [
basicSetup,
StreamLanguage.define(shell),
oneDark,
EditorView.editable.of(false),
EditorView.lineWrapping,
hyperLink,
keymap.of([indentWithTab]),
scrollPastEnd(),
// EditorView.domEventHandlers({
// scroll({ target }) {
// const dom = consoleView.scrollDOM;
// if (dom === (target as HTMLElement)) {
// scrollPos = dom.scrollTop;
// console.log({
// scrollPos,
// sticky,
// clientHeight: dom.clientHeight
// })
// if (scrollPos + dom.clientHeight > consoleView.contentHeight - 50) {
// sticky = true;
// } else {
// // sticky = false;
// }
// }
// }
// }),
// EditorView.updateListener.of((update: ViewUpdate) => {
// if (update.docChanged) {
// if (sticky) {
// const tr = consoleView.state.update({
// effects: [EditorView.scrollIntoView(scrollPos)]
// })
// consoleView.dispatch(tr)
// }
// // const value = update.state.doc.toString();
// // ffmpegOpts = JSON.parse(value)
// // console.log({
// // ffmpegOpts
// // })
// }
// }),
],
parent: consoleEl,
})
ffmpeg = createFFmpeg({
log: true,
progress({ ratio }) {
progress.set(ratio)
},
logger(obj) {
if (consoleView) {
const doc = consoleView.state.doc;
let changes: ChangeSpec[] = []
if (doc.toString().trim() === emptyConsole) {
changes.push({from: 0, to: doc.length })
}
// (Assume view is an EditorView instance holding the document "123".)
const message = `[${obj.type}] ${obj.message}\n`;
changes.push({ from: doc.length, insert: message });
let transaction = consoleView.state.update({ changes })
// At this point the view still shows the old state.
consoleView.dispatch(transaction)
// And now it shows the new state.
}
}
});
(async () => {
loading.set(true);
initializing.set(true);
await ffmpeg?.load?.();
loading.set(false);
initializing.set(false);
})();
const url = new URL(globalThis.location?.href);
if (url.searchParams.get("config")?.trim?.()) {
try {
ffmpegOpts = JSON.parse(url.searchParams.get("config") ?? "{}");
} catch (e) {
console.warn("Bad JSON for ffmpeg config");
ffmpegOpts = Object.assign({}, ffmpegDefaultOpts);
}
}
editorView = new EditorView({
doc: JSON.stringify(ffmpegOpts, null, 2),
extensions: [
basicSetup,
json(),
oneDark,
hyperLink,
EditorView.updateListener.of((update: ViewUpdate) => {
if (update.docChanged) {
const value = update.state.doc.toString();
try {
ffmpegOpts = JSON.parse(value)
} catch (e) {
console.warn(e)
}
console.log({
ffmpegOpts
})
}
}),
],
parent: editorEl
})
if (url.searchParams.get("q")?.trim?.()) {
value = url.searchParams.get("q") ?? "";
}
searchInputEl?.addEventListener?.('change', debounce(() => {
try {
new URL(value);
const newURL = new URL(globalThis.location.href);
newURL.search = new URLSearchParams({
q: value,
config: JSON.stringify(ffmpegOpts)
}).toString();
globalThis.history.replaceState(null, "", newURL);
fileOpenMode = false;
} catch (e) {}
}, 200))
})
async function transcode ({ target }: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
const { files } = target as HTMLInputElement;
const file = files?.[0];
error.set(null);
loading.set(true);
try {
if (file) {
if (ffmpeg && ffmpeg?.isLoaded?.()) {
abortCtlr = new AbortController();
ffmpeg.FS('writeFile', ffmpegOpts.inFilename, await fetchFile(file, { signal: abortCtlr.signal, }));
if (Array.isArray(ffmpegOpts.forceUseArgs)) {
await ffmpeg.run(...ffmpegOpts.forceUseArgs);
} else {
await ffmpeg.run('-i', ffmpegOpts.inFilename, ...ffmpegOpts.args, ffmpegOpts.outFilename);
}
const { mediaType } = ffmpegOpts;
const data = ffmpeg.FS('readFile', ffmpegOpts.outFilename);
const url = URL.createObjectURL(new Blob([data.buffer], { type: mediaType }));
results.unshift({
url,
type: /^(video|audio)/.test(mediaType) || mediaType === "vnd.apple.mpegURL" ? "video" : "image"
});
resultsDep.set(results);
ffmpeg.exit();
ffmpeg.load();
try {
new URL(value);
const newURL = new URL(globalThis.location.href);
newURL.search = new URLSearchParams({
q: value,
config: JSON.stringify(ffmpegOpts)
}).toString();
globalThis.history.pushState(null, "", newURL);
} catch (e) {}
}
}
} catch (e) {
error.set((e ?? "").toString());
console.warn(e);
}
loading.set(false);
}
async function onSearch(e?: Event, popState = false) {
abortCtlr = new AbortController();
error.set(null);
e?.preventDefault?.();
if (value.length <= 0) return;
loading.set(true);
try {
if (ffmpeg && ffmpeg?.isLoaded?.()) {
const arrbuf = await fetchFile(value, { signal: abortCtlr.signal, });
let _url = new URL(value);
if (/.(m3u8|m3u)$/.test(_url?.pathname)) {
try {
const map = await traverseM3U8Manifests(arrbuf, _url);
map?.forEach?.((buf, url) => {
ffmpeg.FS('writeFile', url, new Uint8Array(buf));
})
} catch (e) {
console.warn(`Cannot parse "${value}" as m3u8 playlist`)
}
}
ffmpeg.FS('writeFile', ffmpegOpts.inFilename, arrbuf);
if (Array.isArray(ffmpegOpts.forceUseArgs)) {
await ffmpeg.run(...ffmpegOpts.forceUseArgs);
} else {
await ffmpeg.run('-i', ffmpegOpts.inFilename, ...ffmpegOpts.args, ffmpegOpts.outFilename);
}
const { mediaType } = ffmpegOpts;
const data = ffmpeg.FS('readFile', ffmpegOpts.outFilename);
const url = URL.createObjectURL(new Blob([data.buffer], { type: mediaType }));
results.unshift({
url,
type: /^(video|audio)/.test(mediaType) || mediaType === "vnd.apple.mpegURL" ? "video" : "image"
});
resultsDep.set(results);
}
ffmpeg.exit();
ffmpeg.load();
if (!popState) {
const newURL = new URL(globalThis.location.href);
newURL.search = new URLSearchParams({
q: value,
config: JSON.stringify(ffmpegOpts)
}).toString();
globalThis.history.pushState(null, "", newURL);
}
} catch (e) {
error.set((e ?? "").toString());
console.warn(e);
}
loading.set(false);
}
function onFileOpen({ target }: Event & { currentTarget: EventTarget & HTMLInputElement; }) {
const { files } = target as HTMLInputElement;
const file = files?.[0];
if (file) {
value = file.name;
fileOpenMode = true;
}
}
function validURL(value: string) {
try {
new URL(value);
return true;
} catch (e) {}
return false;
}
function run() {
if (fileOpenMode) {
// @ts-ignore
transcode({ target: openInputEl })
} else {
onSearch(undefined);
}
}
export function syncHeight(el: HTMLElement, initial = 0) {
return writable(initial, (set) => {
if (!el) {
return;
}
let ro = new ResizeObserver(() => {
if (el) { return set(el.offsetHeight); }
});
ro.observe(el);
return () => ro.disconnect();
});
}
</script>
<form on:submit={run} class="flex flex-row gap-2">
<TextBox
bind:value
bind:inputElement={searchInputEl}
type="search"
placeholder="Type URL here..."
searchButton={false}
clearButton={false}
class="search-box"
autofocus={value.length === 0}
>
<div slot="buttons" class="flex flex-row gap-1">
{#if value && value.length > 0}
<TextBoxButton
class="search-button clear-button"
on:click={() => {
(value = "");
if (consoleView) {
let transaction = consoleView.state.update({
changes: [{ from: 0, to: consoleView.state.doc.length }]
})
consoleView.dispatch(transaction)
}
}}
aria-label="Clear Search Button"
>
<FluentDismiss24Regular />
</TextBoxButton>
{/if}
<!-- <TextBoxButton
class="search-button"
on:click={onSearch}
aria-label="Search Button"
>
<FluentSearch24Regular />
</TextBoxButton> -->
{#if $loading && !$initializing }
<TextBoxButton
variant="accent"
class="search-button"
aria-label="Stop processing"
title="Stop processing"
on:click={() => {
abortCtlr.abort();
if (ffmpeg && ffmpeg?.isLoaded?.()) {
ffmpeg?.exit?.();
(async () => {
loading.set(true);
initializing.set(true);
await ffmpeg?.load?.();
loading.set(false);
initializing.set(false);
})();
}
}}
>
<FluentRecord24Filled />
</TextBoxButton>
{:else}
<TextBoxButton
variant="accent"
class="search-button"
aria-label="Start processing"
title="Start processing"
on:click={run}
>
<FluentPlay24Filled />
</TextBoxButton>
{/if}
</div>
</TextBox>
<Button
variant="accent"
class="file-open-button"
aria-label="Open file"
title="Open file"
>
{#if openInputEl?.files && openInputEl?.files?.length > 0 }
<FluentFolder24Filled />
{:else}
<FluentFolder24Regular />
{/if}
<input type="file" id="file-open"
on:change={onFileOpen}
bind:this={openInputEl}
/>
</Button>
{#if value && value.length > 0 && validURL(value)}
<Button
variant="accent"
class="open-in-new-tab-button"
href={value}
aria-label="Open tweet in new-tab"
title="Open tweet in new-tab"
target="_blank"
>
<FluentOpen24Regular />
</Button>
{/if}
</form>
<div class="pt-2 mt-6">
<span class="text-[color:var(--fds-text-on-accent-primary)] bg-[color:var(--fds-system-attention)] px-3 py-1 rounded-full">Examples</span>
<div class="flex gap-2 flex-wrap content-center overflow-auto">
<div class="mt-2 mb-6 flex sm:grid sm:grid-rows-3 sm:grid-cols-5 md:grid-cols-6 gap-x-2 sm:gap-x-4 md:gap-x-6 gap-y-2">
{#each samplesArr as sample, i}
<Button
class="break-keep whitespace-nowrap"
variant={"hyperlink"}
data-selected={JSON.stringify(sample[1]) === JSON.stringify(ffmpegOpts)}
on:click={() => {
const doc = editorView.state.doc;
// (Assume view is an EditorView instance holding the document "123".)
let transaction = editorView.state.update({changes: {from: 0, to: doc.length, insert: JSON.stringify(sample[1], null, 2) }})
console.log(transaction.state.doc.toString()) // "0123"
// At this point the view still shows the old state.
editorView.dispatch(transaction)
// And now it shows the new state.
// onSearch();
const newURL = new URL(globalThis.location.href);
newURL.searchParams.set("config", JSON.stringify(ffmpegOpts));
globalThis.history.replaceState(null, "", newURL);
}}
>
{sample[0]}
</Button>
{/each}
</div>
</div>
</div>
<div class="pt-2">
<Expander>
Advanced
<svelte:fragment slot="content">
FFmpeg Config
<div bind:this={editorEl} class="editor" style:background-color={color.background} style:height={"211px"} />
Logs
<div bind:this={consoleEl} class="editor" style:background-color={color.background} style:height={"300px"} />
</svelte:fragment>
</Expander>
</div>
<section class="pt-7">
<div class="p-2">
<TextBlock tag="h2" variant="bodyLarge">Results</TextBlock>
</div>
<div class="flex gap-2 px-2 pb-2">
<!-- <div class="sm:flex-1"></div> -->
<Button
variant="accent"
class="cursor-pointer w-full"
on:click={() => {
let link = document.createElement("a");
results.forEach(({ url }, i) => {
if (url) {
link.href = url;
link.target = "_blank";
link.download = value
link.click();
}
})
// @ts-ignore
link = null;
}}
>
Download All
</Button>
<Button
class="cursor-pointer w-full"
on:click={() => {
results.forEach(({ url }, i) => {
if (url) URL.revokeObjectURL(url);
})
results = [];
resultsDep.set(results);
}}
>
Clear All
</Button>
</div>
<div class="results">
<div class="results-child" style="--height: {$heightStore}px;">
<div bind:this={el} class="w-full gap-[inherit]">
{#if typeof $error == "string"}
<span
class="text-yellow-700 dark:text-orange-300"
in:blur="{{ delay: 400, amount: 10 }}"
out:blur="{{ amount: 10 }}"
>
<TextBlock>{$error}</TextBlock>
</span>
{:else if $loading || $initializing || results.length <= 0}
<span
class="text-gray-900/60 {$loading || $initializing ? "dark:text-blue-300/90" : "dark:text-gray-300/90"}"
in:blur="{{ delay: 400, amount: 10 }}"
out:blur="{{ amount: 10 }}"
>
<TextBlock variant="body">{$loading || $initializing ? "Loading..." + (!$initializing ? Math.round($progress * 100) + "%" : "") : "Empty..."}</TextBlock>
</span>
{/if}
<div class="w-full flex flex-col gap-[inherit]">
{#each $resultsDep as { url, type }, i (url)}
{#if url && type && url.length > 0}
<div class="flex w-full flex-col">
{#if type == "video" || type == "audio"}
<video
crossorigin="anonymous"
controls
preload="auto"
class="w-full max-h-[500px] bg-black"
in:blur="{{ delay: 400, amount: 10 }}" out:blur="{{ amount: 10 }}"
>
<source src={url} />
</video>
{:else}
<img src={url} loading="eager" in:blur="{{ delay: 400, amount: 10 }}" out:blur="{{ amount: 10 }}" crossorigin="anonymous" />
{/if}
<div class="flex lt-md:flex-col gap-2 pt-2">
<Button
class="w-full"
variant="accent"
href={url}
download={downloads[i]}
>
Download
</Button>
<Button
class="cursor-pointer w-full"
on:click={() => {
if (url) URL.revokeObjectURL(url);
results.splice(i, 1);
resultsDep.set(results);
}}
>
Delete
</Button>
</div>
</div>
{/if}
{/each}
</div>
</div>
</div>
</div>
</section>
<div class="py-7">
<InfoBar
title="Fun fact"
closable={false}
class="docs-info select-auto"
severity={"attention"}
id="fun-fact"
>
<div class="text-gray-900/80 dark:text-gray-200/80">
Convert videos and images into gifs, vice-versa, etc...
<br />
<br />
I created this as a side-quest to
<ol role="list" class="list">
<li>
Try using <a
class="link"
href="https://ffmpegwasm.netlify.app/#demo"
rel="noopener">FFmpeg WASM</a
> (FFmpeg's WASM package feels older than I am, probs due Emscripten 🤷♂️)
</li>
<li>
Plus, it seemed pretty neat to be able convert a gif to mp4 and vice-versa without needing to open it to a server.
</li>
</ol>
</div>
</InfoBar>
<br />
<InfoBar
title="Note"
closable={false}
class="docs-info select-auto"
severity={"success"}
id="note"
>
<div class="text-gray-900/80 dark:text-gray-200/80 select-auto">
Thanks <a
class="link"
href="https://twitter.com/fbritoferreira"
rel="noopener">@fbritoferreira</a> for creating <a
class="link"
href="https://github.com/fbritoferreira/m3u8-parser/tree/main"
rel="noopener">fbritoferreira/m3u8-parser</a> it really is a beautiful library.
<br><br>
The playground uses <a class="link" href="https://github.com/DreamOfIce/ffmpeg.wasm" rel="noopener">@ffmpeg.wasm/main</a>.
<a class="link" href="https://ffmpeg.org/" rel="noopener">FFmpeg</a> and
the corresponding <a class="link" href="https://ffmpegwasm.netlify.app/#demo:~:text=DOCUMENTATION-,External%20Libraries,-ffmpeg.wasm%20is" rel="noopener">media format libraries</a> are licenced under <a class="link" href="https://ffmpeg.org/legal.html" rel="noopener">GPL</a>.
</div>
</InfoBar>
</div>
<style lang="scss">
.file-open-button {
position: relative;
}
.search-button,
.open-in-new-tab-button,
.file-open-button,
:global(.file-open-button input) {
cursor: pointer;
}
#file-open {
width: 100%;
height: 100%;
position: absolute;
left: 0;
top: 0;
opacity: 0;
}
.editor {
padding-block: 0.25em;
margin-block-start: 0.5em;
border-radius: 0.35em;
overflow: hidden;
& :global(.cm-editor) {
border: none;
max-height: 300px;
}
}
:global(.search-box input[type="search"].text-box) {
min-block-size: 40px;
padding-inline-end: 0.25rem;
@apply text-ellipsis;
@apply focus:text-clip;
}
:global(button[type="button"].search-button) {
min-block-size: 40px;
min-block-size: 32px;
min-inline-size: 36px;
}
:global(button.button.style-hyperlink[data-selected="true"]) {
background-color: var(--fds-subtle-fill-secondary);
}
.list {
@apply py-1 list-decimal;
@apply pl-[2ch];
@apply pt-2;
}
.list li {
font: inherit;
display: list-item;
text-align: -webkit-match-parent;
@apply pl-2;
@apply pb-0.5;
}
.list li::marker {
@apply text-[color:#745EFF] dark:text-[color:#DE93F1];
}
.results {
background-color: var(--fds-solid-background-quarternary);
border: 1px solid var(--fds-surface-stroke-flyout);
border-radius: var(--fds-overlay-corner-radius);
box-shadow: var(--fds-card-shadow);
color: var(--fds-text-primary);
font-family: var(--fds-font-family-text);
font-size: var(--fds-body-font-size);
font-weight: 400;
line-height: 20px;
padding: 16px;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.results-child {
@apply w-full gap-[inherit] transition-[height] duration-300 ease-[cubic-bezier(0.33,_1,_0.68,_1)];
--height: 20px;
overflow: hidden;
height: var(--height);
}
img, video {
display: block;
@apply w-full;
}
:global(.info-bar.docs-info) {
@apply select-auto;
@apply rounded-xl;
--fds-control-corner-radius: theme('borderRadius.lg');
}
:global(.info-bar.docs-info#fun-fact),
:global(.info-bar.docs-info#note) {
@apply select-auto;
}
:global(.info-bar.docs-info#note .info-bar-icon),
:global(.info-bar.docs-info#fun-fact .info-bar-icon) {
margin-block-start: 24px;
}
:global(.info-bar.docs-info#note .info-bar-content),
:global(.info-bar.docs-info#fun-fact .info-bar-content) {
margin-block-end: 23px;
margin-block-start: 21px;
}
:global(.info-bar.docs-info#note .info-bar-content h5),
:global(.info-bar.docs-info#fun-fact .info-bar-content h5) {
padding-block-end: 8px;
}
</style>
================================================
FILE: src/components/ffmpeg.ts
================================================
import type { createFFmpeg as ffmpegCreate, CreateFFmpegOptions } from "@ffmpeg.wasm/main/src/index";
import type { StreamParser } from "@codemirror/language"
declare module globalThis {
var FFmpeg: { createFFmpeg: typeof ffmpegCreate }
}
const FFmpeg = globalThis?.FFmpeg ?? {};
/*
* Create ffmpeg instance.
* Each ffmpeg instance owns an isolated MEMFS and works
* independently.
*
* For example:
*
* ```
* const ffmpeg = createFFmpeg({
* log: true,
* logger: () => {},
* progress: () => {},
* corePath: '',
* })
* ```
*
* For the usage of these four arguments, check config.js
*
*/
export const createFFmpeg = (options?: CreateFFmpegOptions) => FFmpeg.createFFmpeg(options);
/**
* Helper function for fetching files from various resources.
* Sometimes the video/audio file you want to process may be located
* in a remote URL or somewhere in your local file system.
*
* This helper function helps you to fetch the file and return an
* Uint8Array variable for ffmpeg.wasm to consume.
*
* @param {string | ArrayBuffer | Blob | File} data - The data to be fetched.
* @returns {Promise<Uint8Array>} - The fetched data as a Uint8Array.
*/
export async function fetchFile(data: string | ArrayBuffer | Blob | File, opts?: RequestInit): Promise<Uint8Array> {
if (typeof data === 'string') {
const response = await fetch(data, opts);
const buffer = await response.arrayBuffer();
return new Uint8Array(buffer);
} else if (data instanceof ArrayBuffer) {
return Promise.resolve(new Uint8Array(data));
} else {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
if (event.target) {
const { result } = event.target;
if (result instanceof ArrayBuffer) {
resolve(new Uint8Array(result));
} else {
reject(new TypeError('Unexpected result type'));
}
} else {
reject(new Error('FileReader event target is missing'));
}
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsArrayBuffer(data as Blob);
});
}
}
// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.
// This module is browser compatible.
/**
* Splits the given array into chunks of the given size and returns them.
*
* @example
* ```ts
* import { chunk } from "https://deno.land/std@$STD_VERSION/collections/chunk.ts";
* import { assertEquals } from "https://deno.land/std@$STD_VERSION/testing/asserts.ts";
*
* const words = [
* "lorem",
* "ipsum",
* "dolor",
* "sit",
* "amet",
* "consetetur",
* "sadipscing",
* ];
* const chunks = chunk(words, 3);
*
* assertEquals(
* chunks,
* [
* ["lorem", "ipsum", "dolor"],
* ["sit", "amet", "consetetur"],
* ["sadipscing"],
* ],
* );
* ```
*/
export function chunk<T>(array: readonly T[], size: number): T[][] {
if (size <= 0 || !Number.isInteger(size)) {
throw new Error(
`Expected size to be an integer greater than 0 but found ${size}`,
);
}
if (array.length === 0) {
return [];
}
const ret = Array.from<T[]>({ length: Math.ceil(array.length / size) });
let readIndex = 0;
let writeIndex = 0;
while (readIndex < array.length) {
ret[writeIndex] = array.slice(readIndex, readIndex + size);
writeIndex += 1;
readIndex += size;
}
return ret;
}
/**
* Returns the difference between two arrays (unique elements in array1 that are not present in array2).
*
* @template T - The type of the elements in the input arrays.
* @param {T[]} arr1 - The first input array.
* @param {T[]} arr2 - The second input array.
* @returns {T[]} - An array containing the unique elements of array1 not present in array2.
*/
export function diff<T>(arr1: readonly T[], arr2: readonly T[]): T[] {
const a = new Set(arr1);
const b = new Set(arr2);
return Array.from([...a].filter(x => !b.has(x)));
}
var words: Record<string, string> = {};
function define(style: string, dict: string | any[]) {
for (var i = 0; i < dict.length; i++) {
words[dict[i]] = style;
}
};
var commonAtoms = ["true", "false"];
var commonKeywords = ["if", "then", "do", "else", "elif", "while", "until", "for", "in", "esac", "fi",
"fin", "fil", "done", "exit", "set", "unset", "export", "function"];
var commonCommands = ["ab", "awk", "bash", "beep", "cat", "cc", "cd", "chown", "chmod", "chroot", "clear",
"cp", "curl", "cut", "diff", "echo", "find", "gawk", "gcc", "get", "git", "grep", "hg", "kill", "killall",
"ln", "ls", "make", "mkdir", "openssl", "mv", "nc", "nl", "node", "npm", "ping", "ps", "restart", "rm",
"rmdir", "sed", "service", "sh", "shopt", "shred", "source", "sort", "sleep", "ssh", "start", "stop",
"su", "sudo", "svn", "tee", "telnet", "top", "touch", "vi", "vim", "wall", "wc", "wget", "who", "write",
"yes", "zsh"];
define('atom', commonAtoms);
define('keyword', commonKeywords);
define('builtin', commonCommands);
function tokenBase(stream: { eatSpace: () => any; sol: () => any; next: () => string; eat: (arg0: string) => string; skipToEnd: () => void; eatWhile: (arg0: RegExp) => void; match: (arg0: string | RegExp) => any; eol: () => any; peek: () => string; current: () => any; }, state: { tokens: { (stream: any, state: any): any; (stream: any, state: any): any; (stream: any, state: any): string; }[]; }) {
if (stream.eatSpace()) return null;
var sol = stream.sol();
var ch = stream.next();
if (ch === '\\') {
stream.next();
return null;
}
if (ch === '\'' || ch === '"' || ch === '`') {
state.tokens.unshift(tokenString(ch, ch === "`" ? "quote" : "string"));
return tokenize(stream, state);
}
if (ch === '#') {
if (sol && stream.eat('!')) {
stream.skipToEnd();
return 'meta'; // 'comment'?
}
stream.skipToEnd();
return 'comment';
}
if (ch === '$') {
state.tokens.unshift(tokenDollar);
return tokenize(stream, state);
}
if (ch === '+' || ch === '=') {
return 'operator';
}
if (ch === '-') {
stream.eat('-');
stream.eatWhile(/\w/);
return 'attribute';
}
if (ch == "<") {
if (stream.match("<<")) return "operator"
var heredoc = stream.match(/^<-?\s*['"]?([^'"]*)['"]?/)
if (heredoc) {
state.tokens.unshift(tokenHeredoc(heredoc[1]))
return 'string.special'
}
}
if (/\d/.test(ch)) {
stream.eatWhile(/\d/);
if (stream.eol() || !/\w/.test(stream.peek())) {
return 'number';
}
}
stream.eatWhile(/[\w-]/);
var cur = stream.current();
if (stream.peek() === '=' && /\w+/.test(cur)) return 'def';
return words.hasOwnProperty(cur) ? words[cur] : null;
}
function tokenString(quote: string, style: string) {
var close = quote == "(" ? ")" : quote == "{" ? "}" : quote
return function (stream: { next: () => any; peek: () => any; backUp: (arg0: number) => void; }, state: { tokens: { (stream: any, state: any): any; (stream: any, state: any): any; (stream: any, state: any): any; }[]; }) {
var next, escaped = false;
while ((next = stream.next()) != null) {
if (next === close && !escaped) {
state.tokens.shift();
break;
} else if (next === '$' && !escaped && quote !== "'" && stream.peek() != close) {
escaped = true;
stream.backUp(1);
state.tokens.unshift(tokenDollar);
break;
} else if (!escaped && quote !== close && next === quote) {
state.tokens.unshift(tokenString(quote, style))
return tokenize(stream, state)
} else if (!escaped && /['"]/.test(next) && !/['"]/.test(quote)) {
state.tokens.unshift(tokenStringStart(next, "string"));
stream.backUp(1);
break;
}
escaped = !escaped && next === '\\';
}
return style;
};
};
function tokenStringStart(quote: any, style: string) {
return function (stream: { next: () => void; }, state: { tokens: ((stream: any, state: any) => any)[]; }) {
state.tokens[0] = tokenString(quote, style)
stream.next()
return tokenize(stream, state)
}
}
var tokenDollar = function (stream: { eat: (arg0: string) => void; next: () => any; eatWhile: (arg0: RegExp) => void; }, state: { tokens: ((stream: any, state: any) => any)[] | void[]; }) {
if (state.tokens.length > 1) stream.eat('$');
var ch = stream.next()
if (/['"({]/.test(ch)) {
state.tokens[0] = tokenString(ch, ch == "(" ? "quote" : ch == "{" ? "def" : "string");
return tokenize(stream, state);
}
if (!/\d/.test(ch)) stream.eatWhile(/\w/);
state.tokens.shift();
return 'def';
};
function tokenHeredoc(delim: any) {
return function (stream: { sol: () => any; string: any; skipToEnd: () => void; }, state: { tokens: void[]; }) {
if (stream.sol() && stream.string == delim) state.tokens.shift()
stream.skipToEnd()
return "string.special"
}
}
function tokenize(stream: any, state: { tokens: any[]; }) {
return (state.tokens[0] || tokenBase)(stream, state);
};
export const shell: StreamParser<unknown> = {
name: "shell",
startState: function () { return { tokens: [] }; },
token: function (stream: any, state: any) {
return tokenize(stream, state);
},
languageData: {
autocomplete: commonAtoms.concat(commonKeywords, commonCommands),
closeBrackets: { brackets: ["(", "[", "{", "'", '"', "`"] },
commentTokens: { line: "#" }
}
};
// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.
// This module is browser compatible.
/**
* A debounced function that will be delayed by a given `wait`
* time in milliseconds. If the method is called again before
* the timeout expires, the previous call will be aborted.
*/
export interface DebouncedFunction<T extends Array<unknown>> {
(...args: T): void;
/** Clears the debounce timeout and omits calling the debounced function. */
clear(): void;
/** Clears the debounce timeout and calls the debounced function immediately. */
flush(): void;
/** Returns a boolean whether a debounce call is pending or not. */
readonly pending: boolean;
}
/**
* Creates a debounced function that delays the given `func`
* by a given `wait` time in milliseconds. If the method is called
* again before the timeout expires, the previous call will be
* aborted.
*
* @example
* ```
* import { debounce } from "https://deno.land/std@$STD_VERSION/async/debounce.ts";
*
* const log = debounce(
* (event: Deno.FsEvent) =>
* console.log("[%s] %s", event.kind, event.paths[0]),
* 200,
* );
*
* for await (const event of Deno.watchFs("./")) {
* log(event);
* }
* // wait 200ms ...
* // output: Function debounced after 200ms with baz
* ```
*
* @param fn The function to debounce.
* @param wait The time in milliseconds to delay the function.
*/
// deno-lint-ignore no-explicit-any
export function debounce<T extends Array<any>>(
fn: (this: DebouncedFunction<T>, ...args: T) => void,
wait: number,
): DebouncedFunction<T> {
let timeout: number | null = null;
let flush: (() => void) | null = null;
const debounced: DebouncedFunction<T> = ((...args: T) => {
debounced.clear();
flush = () => {
debounced.clear();
fn.call(debounced, ...args);
};
// @ts-ignore
timeout = setTimeout(flush, wait);
}) as DebouncedFunction<T>;
debounced.clear = () => {
if (typeof timeout === "number") {
clearTimeout(timeout);
timeout = null;
flush = null;
}
};
debounced.flush = () => {
flush?.();
};
Object.defineProperty(debounced, "pending", {
get: () => typeof timeout === "number",
});
return debounced;
}
// const m3u8 = new M3U8Parser({ playlist: toText });
// await Promise.all(
// m3u8.getPlaylist().items.map(async ({url}) => {
// if (url) {
// console.log(new URL(url, value).href)
// ffmpeg.FS('writeFile', url, await fetchFile(new URL(url, value).href));
// }
// })
// );
// console.log({
// m3u8,
// getPlalist: m3u8.getPlaylist(),
// })
================================================
FILE: src/components/register-sw.svelte
================================================
<script lang="ts">
import type {
Renderable,
DefaultToastOptions,
ToastOptions,
ToastType,
} from "svelte-french-toast";
import { onMount } from "svelte";
import toast, { Toaster, resolveValue } from "svelte-french-toast";
import CustomToast from "./custom-toast.svelte";
import { createServiceWorker } from "./service-worker";
type CustomToastType = ToastType | "update";
type CustomToastOptions = {
messageStr?: Renderable | string;
toastType?: CustomToastType;
updateClick?: () => Promise<void>;
dismissClick?: () => void;
};
function customToast(
type: CustomToastType,
message: Renderable | string,
options?: ToastOptions & CustomToastOptions
) {
return toast.custom(CustomToast, {
position: "bottom-right",
className: "toast",
// @ts-ignore
toastType: type,
// @ts-ignore
messageStr: message,
...options,
});
}
function toastPromise<T>(
promise: Promise<T>,
msgs: {
loading: Renderable;
success: Renderable;
error: Renderable;
},
opts?: DefaultToastOptions | undefined
): Promise<T> {
const id = customToast("loading", msgs.loading, {
...opts,
...opts?.loading,
});
promise
.then((p) => {
customToast("success", resolveValue(msgs.success, p), {
id,
...opts,
...opts?.success,
});
return p;
})
.catch((e) => {
customToast("error", resolveValue(msgs.error, e), {
id,
...opts,
...opts?.error,
});
});
return promise;
}
const intervalMS = 60 * 1000;
function RegisterServiceWorker() {
const { offlineReady, needRefresh, updateServiceWorker } = createServiceWorker({
onOfflineReady() {
customToast("success", "App ready to work offline");
},
onNeedRefresh() {
customToast(
"update",
"New content available, click on reload button to update",
{
duration: Infinity,
async updateClick() {
await toastPromise(updateServiceWorker(true), {
loading: "Updating...",
success: "Update Successful",
error: "Error Updating",
});
},
dismissClick() {
offlineReady.set(false);
needRefresh.set(false);
},
}
);
},
onRegistered(r) {
console.log("SW Registered: small change", r);
r &&
setInterval(() => {
r.update();
}, intervalMS);
},
onRegisterError(error: any) {
console.log("SW registration error", error);
},
});
}
if ("navigator" in globalThis) {
RegisterServiceWorker();
}
</script>
<Toaster />
================================================
FILE: src/components/search.svelte
================================================
<script lang="ts">
import type { MediaItem } from "../lib/get-tweet";
import { writable } from "svelte/store";
import { blur } from 'svelte/transition';
import {
InfoBar,
Button,
TextBlock,
TextBox,
TextBoxButton,
} from "fluent-svelte";
import FluentDismiss24Regular from "~icons/fluent/dismiss-24-regular";
import FluentSearch24Regular from "~icons/fluent/search-24-regular";
import FluentOpen24Regular from "~icons/fluent/open-24-regular";
import { onMount } from "svelte";
export function syncHeight(el: HTMLElement, initial = 0) {
return writable(initial, (set) => {
if (!el) {
return;
}
let ro = new ResizeObserver(() => {
if (el) { return set(el.offsetHeight); }
});
ro.observe(el);
return () => ro.disconnect();
});
}
let el: HTMLElement;
$: heightStore = syncHeight(el);
export let value = "";
let loading = false;
export let results: MediaItem[] = [];
let error = writable<string | null>(null);
globalThis?.addEventListener?.("popstate", (event) => {
const url = new URL(globalThis.location.href);
value = url.searchParams.get("q") ?? "";
onSearch(undefined, true);
});
async function onSearch(e?: Event, popState = false) {
error.set(null);
e?.preventDefault?.();
if (value.length <= 0) return;
loading = true;
try {
const result = await (
await fetch("/api/twitter?url=" + encodeURIComponent(value))
).json();
if ("error" in result) { throw new Error(result.error); }
results = result;
console.log(results);
if (!popState && !$error) {
const newURL = new URL(globalThis.location.href);
newURL.search = "?q=" + value;
globalThis.history.pushState(null, "", newURL);
}
} catch (e) {
error.set((e ?? "").toString());
console.warn(e);
}
loading = false;
}
if (value && value.length > 0 && globalThis?.document && results.length <= 0) {
onSearch();
}
console.log({
results
})
onMount(() => {
if (!value || value.length == 0 && results.length <= 0) {
const url = new URL(globalThis.location?.href);
value = url.searchParams.get("q") ?? "";
onSearch();
}
});
const samples = [
"https://twitter.com/elonmusk/status/1585341984679469056",
"https://twitter.com/dsaezgil/status/1535647141829324800",
"https://twitter.com/dubdotsh/status/1595831742195269635",
// "https://twitter.com/okikio_dev/status/1604321740699697155",
"https://twitter.com/davidb27111/status/1602670914231050242"
]
</script>
<form on:submit={onSearch} class="flex flex-row gap-2">
<TextBox
bind:value
type="search"
placeholder="Type URL here..."
searchButton={false}
clearButton={false}
class="search-box"
autofocus={value.length === 0}
>
<div slot="buttons" class="flex flex-row gap-1">
{#if value && value.length > 0}
<TextBoxButton
class="search-button clear-button"
on:click={() => (value = "")}
aria-label="Clear Search Button"
>
<FluentDismiss24Regular />
</TextBoxButton>
{/if}
<TextBoxButton
class="search-button"
on:click={onSearch}
aria-label="Search Button"
>
<FluentSearch24Regular />
</TextBoxButton>
</div>
</TextBox>
{#if value && value.length > 0}
<Button
variant="accent"
class="search-button"
href={value}
aria-label="Open tweet in new-tab"
title="Open tweet in new-tab"
target="_blank"
>
<FluentOpen24Regular />
</Button>
{/if}
</form>
<div class="pt-2 overflow-auto">
<div class="flex gap-2 xsm:justify-center items-center my-6">
<span class="text-[color:var(--fds-text-on-accent-primary)] bg-[color:var(--fds-system-attention)] px-3 py-1 rounded-full">Examples:</span>
{#each samples as sample, i}
<Button
class="break-keep whitespace-nowrap"
variant={"hyperlink"}
data-selected={sample == value}
data-href={sample}
on:click={() => {
value = sample;
onSearch();
}}
>
Sample {i + 1}
</Button>
{/each}
</div>
</div>
<section class="pt-7">
<div class="p-2">
<TextBlock tag="h2" variant="bodyLarge">Results</TextBlock>
</div>
<div class="results">
<div class="results-child" style="--height: {$heightStore}px;">
<div bind:this={el} class="w-full gap-[inherit]">
{#if !(results.length > 0) || $error !== null}
{#if typeof $error == "string"}
<span
class="text-yellow-700 dark:text-orange-300"
in:blur="{{ delay: 400, amount: 10 }}"
out:blur="{{ amount: 10 }}"
>
<TextBlock>{$error}</TextBlock>
</span>
{:else}
<span
class="text-gray-900/60 {loading ? "dark:text-blue-300/90" : "dark:text-gray-300/90"}"
in:blur="{{ delay: 400, amount: 10 }}"
out:blur="{{ amount: 10 }}"
>
<TextBlock variant="body">{loading ? "Loading" : "Empty"}...</TextBlock>
</span>
{/if}
{:else}
<div class="w-full flex flex-col gap-[inherit]">
{#each results as { type, variants } (JSON.stringify(variants ?? "[]"))}
{@const variant = variants[0]}
{#if variant.url && type && variant.url.length > 0}
{#if type == "video" || /video/.test(variant.mimeType)}
<video
crossorigin="anonymous"
controls
preload="auto"
class="w-full bg-black object-cover"
style={variant.aspectRatio ? `aspect-ratio: ${variant.aspectRatio.replace(":", "/")}` : ""}
in:blur="{{ delay: 400, amount: 10 }}" out:blur="{{ amount: 10 }}"
>
<source src={variant.url} />
</video>
{:else}
<img
src={variant.url}
loading="eager"
class="w-full object-cover"
in:blur="{{ delay: 400, amount: 10 }}" out:blur="{{ amount: 10 }}"
style={variant.aspectRatio ? `aspect-ratio: ${variant.aspectRatio.replace(":", "/")}` : ""}
crossorigin="anonymous"
/>
{/if}
{/if}
{/each}
</div>
{/if}
</div>
</div>
</div>
</section>
<div class="py-7">
<InfoBar
title="Note"
closable={false}
class="docs-info select-auto"
severity={"success"}
id="note"
>
<div class="text-gray-900/80 dark:text-gray-200/80">
You can store the videos, images, and gifs, share them and/or,
create a meme from the them, the world is your oyester.
</div>
</InfoBar>
<br />
<InfoBar
title="Fun fact"
closable={false}
class="docs-info select-auto"
severity={"attention"}
id="fun-fact"
>
<div class="text-gray-900/80 dark:text-gray-200/80">
Download videos and images for gifs, gallary tweets, quote tweets, normal video and image
posts and even the preview images for links, it can handle it
all.
<br />
<br />
I created this as a side-quest to
<ol role="list" class="list">
<li>
Try using <a
class="link"
href="https://fluent-svelte.vercel.app/"
rel="noopener">fluent-svelte</a
> (Fluent UI is pretty cool)
</li>
<li>
Use <a class="link" href="https://astro.build" rel="noopener">Astro</a
> to create a tool people may like to use
</li>
<li>
I found the other twitter video and image downloaders kinda sus, thus, an open-source tool for downloading twitter videos and images (la pièce de résistance).
</li>
</ol>
</div>
</InfoBar>
</div>
<style lang="scss">
:global(.search-box input[type="search"].text-box) {
min-block-size: 40px;
padding-inline-end: 0.25rem;
@apply text-ellipsis;
@apply focus:text-clip;
}
:global(button[type="button"].search-button) {
min-block-size: 40px;
min-block-size: 32px;
min-inline-size: 36px;
}
:global(button.button.style-hyperlink[data-selected="true"]) {
background-color: var(--fds-subtle-fill-secondary);
}
.list {
@apply py-1 list-decimal;
@apply pl-[2ch];
@apply pt-2;
}
.list li {
font: inherit;
display: list-item;
text-align: -webkit-match-parent;
@apply pl-2;
@apply pb-0.5;
}
.list li::marker {
@apply text-[color:#745EFF] dark:text-[color:#DE93F1];
}
.results {
background-color: var(--fds-solid-background-quarternary);
border: 1px solid var(--fds-surface-stroke-flyout);
border-radius: var(--fds-overlay-corner-radius);
box-shadow: var(--fds-card-shadow);
color: var(--fds-text-primary);
font-family: var(--fds-font-family-text);
font-size: var(--fds-body-font-size);
font-weight: 400;
line-height: 20px;
padding: 16px;
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
}
.results-child {
@apply w-full gap-[inherit] transition-[height] duration-300 ease-[cubic-bezier(0.33,_1,_0.68,_1)];
--height: 20px;
overflow: hidden;
height: var(--height);
}
img, video {
display: block;
@apply w-full;
}
:global(.info-bar.docs-info) {
@apply select-auto;
@apply rounded-xl;
--fds-control-corner-radius: theme('borderRadius.lg');
}
:global(.info-bar.docs-info#fun-fact),
:global(.info-bar.docs-info#note) {
@apply select-auto;
}
:global(.info-bar.docs-info#note .info-bar-icon),
:global(.info-bar.docs-info#fun-fact .info-bar-icon) {
margin-block-start: 24px;
}
:global(.info-bar.docs-info#note .info-bar-content),
:global(.info-bar.docs-info#fun-fact .info-bar-content) {
margin-block-end: 23px;
margin-block-start: 21px;
}
:global(.info-bar.docs-info#note .info-bar-content h5),
:global(.info-bar.docs-info#fun-fact .info-bar-content h5) {
padding-block-end: 8px;
}
</style>
================================================
FILE: src/components/service-worker.ts
================================================
import type { Workbox as TypeWorkbox } from "workbox-window";
import * as workbox from "workbox-window";
import { writable } from "svelte/store";
const { Workbox, messageSW } = workbox;
export interface RegisterSWOptions {
immediate?: boolean
onNeedRefresh?: (wb?: TypeWorkbox) => void
onOfflineReady?: (wb?: TypeWorkbox) => void
onRegistered?: (registration: ServiceWorkerRegistration | undefined, wb?: TypeWorkbox) => void
onRegisterError?: (error: Error, wb?: TypeWorkbox) => void
}
const ServiceWorkerUrl = "/service-worker.js";
// __SW_AUTO_UPDATE__ will be replaced by virtual module
// const autoUpdateMode = "false"; // '__SW_AUTO_UPDATE__'
// __SW_SELF_DESTROYING__ will be replaced by virtual module
// const selfDestroying = "false"; // '__SW_SELF_DESTROYING__'
const auto = false; // autoUpdateMode === "true";
const autoDestroy = false; // selfDestroying === "true";
export function registerSW(options: RegisterSWOptions = {}) {
const {
immediate = false,
onNeedRefresh,
onOfflineReady,
onRegistered,
onRegisterError,
} = options;
let wb: TypeWorkbox | undefined;
let registration: ServiceWorkerRegistration | undefined;
const updateServiceWorker = async (reloadPage = true) => {
if (!auto) {
// Assuming the user accepted the update, set up a listener
// that will reload the page as soon as the previously waiting
// service worker has taken control.
if (reloadPage) {
wb?.addEventListener("controlling", (event) => {
if (event.isUpdate) {
window.location.reload();
}
});
}
if (registration && registration.waiting) {
// Send a message to the waiting service worker,
// instructing it to activate.
// Note: for this to work, you have to add a message
// listener in your service worker. See below.
await messageSW(registration.waiting, { type: "SKIP_WAITING" });
}
}
};
if ("serviceWorker" in navigator) {
// __SW__, __SCOPE__ and __TYPE__ will be replaced by virtual module
wb = new Workbox(ServiceWorkerUrl);
wb.addEventListener("activated", (event) => {
// this will only controls the offline request.
// event.isUpdate will be true if another version of the service
// worker was controlling the page when this version was registered.
if (event.isUpdate)
auto && window.location.reload();
else if (!autoDestroy)
onOfflineReady?.(wb);
});
if (!auto) {
const showSkipWaitingPrompt = () => {
// \`event.wasWaitingBeforeRegister\` will be false if this is
// the first time the updated service worker is waiting.
// When \`event.wasWaitingBeforeRegister\` is true, a previously
// updated service worker is still waiting.
// You may want to customize the UI prompt accordingly.
// Assumes your app has some sort of prompt UI element
// that a user can either accept or reject.
onNeedRefresh?.(wb);
};
// Add an event listener to detect when the registered
// service worker has installed but is waiting to activate.
wb.addEventListener("waiting", showSkipWaitingPrompt);
// @ts-expect-error event listener provided by workbox-window
wb.addEventListener("externalwaiting", showSkipWaitingPrompt);
}
// register the service worker
wb.register({ immediate }).then((r) => {
registration = r;
onRegistered?.(r, wb);
}).catch((e) => {
onRegisterError?.(e, wb);
});
}
return updateServiceWorker;
}
export function createServiceWorker(options: RegisterSWOptions = {}) {
const {
immediate = true,
onNeedRefresh,
onOfflineReady,
onRegistered,
onRegisterError,
} = options;
const needRefresh = writable(false);
const offlineReady = writable(false);
const updateServiceWorker = registerSW({
immediate,
onOfflineReady() {
needRefresh.set(true);
onOfflineReady?.();
},
onNeedRefresh() {
needRefresh.set(true);
onNeedRefresh?.();
},
onRegistered,
onRegisterError,
});
return {
needRefresh,
offlineReady,
updateServiceWorker,
};
}
================================================
FILE: src/components/transition.ts
================================================
import { cubicInOut } from "svelte/easing";
export function blur(node, { delay = 0, duration = 400, easing = cubicInOut, amount = 5, opacity = 0 } = {}) {
const style = getComputedStyle(node);
const target_opacity = +style.opacity;
const f = style.filter === 'none' ? '' : style.filter;
const od = target_opacity * (1 - opacity);
return {
delay,
duration,
easing,
css: (_t, u) => `opacity: ${target_opacity - (od * u)}; filter: ${f} blur(${u * amount}px);`
};
}
================================================
FILE: src/env.d.ts
================================================
/// <reference types="svelte" />
/// <reference types="astro/client" />
/// <reference types="unplugin-icons/types/svelte" />
================================================
FILE: src/layouts/Layout.astro
================================================
---
import "fluent-svelte/theme.css";
import "@fontsource-variable/inter-tight/index.css";
import "@fontsource-variable/inter/index.css";
// import RegisterSw from "../components/register-sw.svelte";
export interface Props {
title: string;
description: string;
preload: boolean;
}
const { title, description, preload } = Astro.props;
---
<!DOCTYPE html>
<html lang="en" class="background">
<head>
<meta charset="UTF-8" />
<meta name="generator" content={Astro.generator} />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>{title}</title>
<link rel="manifest" href="/manifest.json" />
<meta name="robots" content="index, follow" />
<link
rel="search"
href={Astro.site?.origin?.toString() + "/open-search.xml"}
type="application/opensearchdescription+xml"
title="inthistweet: Twitter URL..."
/>
<link rel="icon" type="image/svg+xml" href="/favicon/favicon.svg" />
<meta
name="theme-color"
content="#e8f0f6"
media="(prefers-color-scheme: light)"
/>
<meta
name="theme-color"
content="#1d2026"
media="(prefers-color-scheme: dark)"
/>
<link
rel="apple-touch-icon"
sizes="180x180"
href="/favicon/apple-touch-icon.png"
/>
<link
rel="icon"
type="image/png"
sizes="32x32"
href="/favicon/favicon-32x32.png"
/>
<link
rel="icon"
type="image/png"
sizes="16x16"
href="/favicon/favicon-16x16.png"
/>
<link
rel="mask-icon"
href="/favicon/safari-pinned-tab.svg"
color="#745eff"
/>
<meta name="msapplication-TileColor" content="#232323" />
<meta name="msapplication-config" content="/favicon/browserconfig.xml" />
<meta name="title" property="og:title" content={title} />
<meta name="twitter:title" itemprop="name" content={title} />
<meta name="apple-mobile-web-app-title" content={title} />
<meta name="description" property="og:description" content={description} />
<meta
property="twitter:description"
itemprop="description"
content={description}
/>
<meta
name="keywords"
content="twitter media,twitter image/video downloader,tweet video download,tweet image download"
/>
<meta name="og:locale" content="en_Us" />
<meta property="og:type" content="website" />
<meta name="web-author" content="Okiki Ojo" />
<meta property="article:author" content="Okiki Ojo" />
<meta name="contact" content="hey@okikio.dev" />
<meta name="twitter:card" content="summary_large_image" />
<meta property="twitter:image:alt" content="In this tweet's logo" />
<meta name="twitter:site" content="@inthistweet_dev" />
<meta name="twitter:creator" content="@okikio_dev" />
<meta
property="image"
content={Astro.site?.origin.toString() + "/favicon/social-preview.png"}
/>
<meta
property="og:image"
content={Astro.site?.origin.toString() + "/favicon/social-preview.png"}
/>
<meta
name="twitter:image"
content={Astro.url?.origin.toString() + "/favicon/social-preview.png"}
/>
<meta
name="twitter:url"
property="og:site_name"
content={Astro.url?.origin.toString()}
/>
<link rel="canonical" href={Astro.url.toString()} />
<meta itemprop="url" content={Astro.url.toString()} />
<meta name="shortlink" content={Astro.url.toString()} />
<meta property="og:url" content={Astro.url.toString()} />
<meta name="generator" content={Astro.generator} />
<link rel="preconnect" href="https://video.twimg.com" />
<link rel="preconnect" href="https://pbs.twimg.com" />
<link href="https://twitter.com/inthistweet_dev" rel="me" />
<link
rel="webmention"
href="https://webmention.io/inthistweet.app/webmention"
/>
<link rel="pingback" href="https://webmention.io/inthistweet.app/xmlrpc" />
<link
rel="pingback"
href="https://webmention.io/webmention?forward=https://inthistweet.app/endpoint"
/>
<!-- <link rel="shortcut icon" href="/favicon/favicon.ico"> -->
<!-- <script async defer data-website-id="72683bf5-0839-42eb-84e4-5d34f619a31c" src="https://analytics.bundlejs.com/umami.js"></script> -->
<!-- <link rel="preload" href="https://video.twimg.com/ext_tw_video/1585341912877146112/pu/vid/1920x1080/aeoVUvTgj4wHShhN.mp4" as="video" /> -->
<!-- <link rel="icon" type="image/svg+xml" href="/favicon.svg" /> -->
<!-- <link rel="shortcut icon" href="/favicon/favicon.ico"> -->
</head>
<body>
<slot />
<!-- <RegisterSw client:only="svelte" /> -->
</body>
</html>
<style is:global lang="scss">
:root {
--accent: 124, 58, 237;
--accent-gradient: linear-gradient(
45deg,
rgb(var(--accent)),
#da62c4 30%,
white 60%
);
/* Font Families */
--fds-font-family-fallback: "InterVariable", "Inter TightVariable",
-apple-system, "Segoe UI", "Open Sans", ui-sans-serif, system-ui,
BlinkMacSystemFont, Helvetica, Arial, sans-serif;
--fds-font-family-text: "Segoe UI Variable Text",
"Seoge UI Variable Static Text", var(--fds-font-family-fallback);
--fds-font-family-small: "Segoe UI Variable Small",
"Seoge UI Variable Static Small", var(--fds-font-family-fallback);
--fds-font-family-display: "Segoe UI Variable Display",
"Seoge UI Variable Static Display", var(--fds-font-family-fallback);
}
button {
@apply focus-visible:ring-2 focus-visible:ring-primary focus-visible:ring-opacity-90;
@apply ring-offset-2 ring-offset-black;
@apply focus:outline-none;
@apply transition duration-200 ease-out;
}
.title-display {
/* Font Families */
--fds-font-family-display: "Inter TightVariable", -apple-system,
"Segoe UI Variable Display", "Seoge UI Variable Static Display",
var(--fds-font-family-fallback);
font-family: var(--fds-font-family-display);
}
html {
font-family: "Inter", var(--fds-font-family-text), system-ui, sans-serif;
background-color: var(--fds-solid-background-base);
color: var(--fds-text-primary);
font-family: var(--fds-font-family-text);
font-size: var(--fds-body-font-size);
font-weight: 400;
color-scheme: dark light;
scrollbar-gutter: stable;
}
.background {
background-image: url(/bloom-mica-light.webp);
background-attachment: fixed;
background-size: cover;
background-position: center center;
}
.background:before {
background-image: url(/bloom-mica-light.webp);
filter: blur(5px) saturate(200deg);
/* position: fixed; */
background-repeat: no-repeat;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: "";
z-index: -1;
}
@media (prefers-color-scheme: dark) {
.background,
.background:before {
background-image: url(/bloom-mica-dark.webp);
}
}
code {
font-family: Menlo, Monaco, Lucida Console, Liberation Mono,
DejaVu Sans Mono, Bitstream Vera Sans Mono, Courier New, monospace;
}
</style>
================================================
FILE: src/lib/codemirror.ts
================================================
import type { EditorStateConfig } from "@codemirror/state";
import { EditorView } from "codemirror";
import { writable } from "svelte/store";
import { onMount } from "svelte";
export function createCodeMirror(editorState: EditorStateConfig, parentEl?: HTMLElement) {
console.log({
editorState
})
return new EditorView({
parent: parentEl,
...editorState,
})
}
================================================
FILE: src/lib/ffmpeg.ts
================================================
// import { FFmpeg } from "../../node_modules/.pnpm/@ffmpeg+ffmpeg@0.12.7/node_modules/@ffmpeg/ffmpeg/dist/esm/classes.js";
import { FFmpeg } from "@ffmpeg/ffmpeg";
import FFmpegCoreUrl from "../../node_modules/@ffmpeg/core-mt/dist/umd/ffmpeg-core.js?url";
import FFmpegWASMUrl from "../../node_modules/@ffmpeg/core-mt/dist/umd/ffmpeg-core.wasm?url";
import FFmpegWorkerUrl from "../../node_modules/@ffmpeg/core-mt/dist/umd/ffmpeg-core.worker.js?url";
// import FFmpegCoreUrl from "@ffmpeg/core-mt?url";
// import FFmpegWASMUrl from "@ffmpeg/core-mt/wasm?url";
// import FFmpegWorkerUrl from "./vendor/worker.ts?url";
// import FFmpegWorkerUrl from "@ffmpeg/core-mt/dist/esm/ffmpeg-core.worker.js?url";
// import FFmpegCoreUrl from "../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.js?url";
// import FFmpegWASMUrl from "../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.wasm?url";
// import FFmpegWorkerUrl from "../../node_modules/@ffmpeg/core-mt/dist/umd/ffmpeg-core.worker.js?url";
// import FFmpegWorkerRaw from "../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.worker.js?raw";
import { toBlobURL, toDataUrl } from "./utils/url.ts"
type FFmpegLoadParams = Parameters<(typeof FFmpeg)['prototype']['load']>;
type FFMessageLoadConfig = FFmpegLoadParams[0];
type FFMessageOptions = FFmpegLoadParams[1];
/*
* Create ffmpeg instance.
* Each ffmpeg instance owns an isolated MEMFS and works
* independently.
*
* For example:
*
* ```
* const ffmpeg = createFFmpeg({
* log: true,
* logger: () => {},
* progress: () => {},
* corePath: '',
* })
* ```
*
* For the usage of these four arguments, check config.js
*
*/
export async function createFFmpeg (config?: FFMessageLoadConfig, opts?: FFMessageOptions) {
const ffmpegInstance = new FFmpeg();
const initialConfig: FFMessageLoadConfig = {
coreURL: FFmpegCoreUrl,
wasmURL: FFmpegWASMUrl,
// workerURL: toDataUrl(FFmpegWorkerRaw, "text/javascript"),
workerURL: FFmpegWorkerUrl,
// coreURL: await toBlobURL(FFmpegCoreUrl, 'text/javascript'),
// wasmURL: await toBlobURL(FFmpegWASMUrl, 'application/wasm'),
// workerURL: await toBlobURL(FFmpegWorkerUrl, 'text/javascript'),
...config
}
console.log(initialConfig)
await ffmpegInstance.load(initialConfig, opts);
return ffmpegInstance;
}
/**
* An util function to fetch data from url string, base64, URL, File or Blob format.
*
* Examples:
* ```ts
* // URL
* await fetchFile("http://localhost:3000/video.mp4");
* // base64
* await fetchFile("data:<type>;base64,wL2dvYWwgbW9yZ...");
* // URL
* await fetchFile(new URL("video.mp4", import.meta.url));
* // File
* fileInput.addEventListener('change', (e) => {
* await fetchFile(e.target.files[0]);
* });
* // Blob
* const blob = new Blob(...);
* await fetchFile(blob);
* ```
*/
/**
* Helper function for fetching files from various resources.
* Sometimes the video/audio file you want to process may be located
* in a remote URL or somewhere in your local file system.
*
* This helper function helps you to fetch the file and return an
* Uint8Array variable for ffmpeg.wasm to consume.
*
* @param {string | ArrayBuffer | Blob | File} data - The data to be fetched.
* @returns {Promise<Uint8Array>} - The fetched data as a Uint8Array.
*/
export async function fetchFile(data: string | ArrayBuffer | Blob | File, opts?: RequestInit): Promise<Uint8Array> {
if (typeof data === 'string') {
const response = await fetch(data, opts);
const buffer = await response.arrayBuffer();
return new Uint8Array(buffer);
} else if (data instanceof ArrayBuffer) {
return Promise.resolve(new Uint8Array(data));
} else {
return new Promise((resolve, reject) => {
const reader = new FileReader();
reader.onload = (event) => {
if (event.target) {
const { result } = event.target;
if (result instanceof ArrayBuffer) {
resolve(new Uint8Array(result));
} else {
reject(new TypeError('Unexpected result type'));
}
} else {
reject(new Error('FileReader event target is missing'));
}
};
reader.onerror = (error) => {
reject(error);
};
reader.readAsArrayBuffer(data as Blob);
});
}
}
================================================
FILE: src/lib/get-tweet.ts
================================================
// Based on `react-tweet` (https://github.com/vercel/react-tweet) and `download-twitter-video` (https://github.com/egoist/download-twitter-video)
import type { ImageValue, TwitterCard, UnifiedCardData } from '../types/card.ts';
import type { Tweet, MediaDetails, TweetParent, QuotedTweet, CardMediaEntity } from '../types/index.ts';
import "urlpattern-polyfill"
export const EMBED_API_URL = "https://cdn.syndication.twimg.com";
/**
* Custom error class for handling Twitter API errors.
*/
export class TwitterApiError extends Error {
status: number
data: any
constructor({
message,
status,
data,
}: {
message: string
status: number
data: any
}) {
super(message)
this.name = 'TwitterApiError'
this.status = status
this.data = data
}
}
/**
* Represents an item of media associated with a tweet, such as a photo or video.
*/
export interface MediaItem {
type: string; // Type of the media item (e.g., photo, video)
variants: MediaVariant[]; // Different variants of the media item
}
/**
* Represents a variant of media included in a tweet, with details like URL and quality.
* Think of a variant as a version of media,
* e.g. the various qualties of videos,
* e.g. a video variant of 360p and 720p, etc...
*/
export interface MediaVariant {
url: string;
quality: string; // Resolution quality (e.g., '720p', '1080p')
aspectRatio: string; // Aspect ratio, important for display purposes
mimeType: string; // MIME type, useful for rendering decisions
fileSizeInBytes?: number; // Optional file size information
altText?: string; // Optional alternative text for accessibility
}
/**
* Approximates the resolution quality of a video based on its bitrate.
* Higher bitrates generally indicate higher video quality.
* @param bitrate - The bitrate of the video in bits per second.
* @returns A string representing the approximated resolution (e.g., '720p', '1080p').
*/
export function approximateResolution(bitrate: number): string {
// Resolution is approximated based on common bitrate thresholds
// Add more thresholds if needed to handle different resolutions
if (bitrate > 5000000) return '1080p';
if (bitrate > 2000000) return '720p';
if (bitrate > 1000000) return '480p';
if (bitrate > 500000) return '360p';
return '240p';
}
/**
* Sorts media variants based on the type of media.
* For photos, sorts by aspect ratio; for videos and GIFs, sorts by quality.
* @param variants - Array of media variants to be sorted.
* @param type - The type of media (photo, video, animated_gif).
* @returns Sorted array of media variants.
*/
export const sortVariants = (variants: MediaVariant[], type: "photo" | "video" | "animated_gif" | (string & {})): MediaVariant[] => {
// Sorting logic differs based on the media type
// For example, photos might be sorted by aspect ratio for optimal display
// Videos and GIFs are sorted by quality for best viewing experience
switch (type) {
case 'photo':
// Sort by aspect ratio
return variants.sort((a, b) => {
const ratioA = aspectRatioToFloat(a.aspectRatio);
const ratioB = aspectRatioToFloat(b.aspectRatio);
return ratioB - ratioA; // Descending order
});
case 'video':
case 'animated_gif':
// Sort by quality (high to low)
return variants.sort((a, b) => qualityToNumber(b.quality) - qualityToNumber(a.quality));
default:
return variants;
}
};
// Utility functions for internal calculations
// aspectRatioToFloat and qualityToNumber help in sorting and comparing media variants
// Converts aspect ratio string to a float for comparison
export const aspectRatioToFloat = (aspectRatio: string): number => {
const [width, height] = aspectRatio.split(':').map(Number);
return width / height;
};
// Converts quality string to a number for comparison
export const qualityToNumber = (quality: string): number => {
const qualityMap: { [key: string]: number } = {
'1080p': 1080,
'720p': 720,
// Add more mappings as needed
'default': 0,
};
return qualityMap[quality] || qualityMap['default'];
};
/**
* Processes and extracts media variants from a given MediaDetails object.
* This function handles different types of media (photo, video, animated_gif)
* and extracts relevant information for each type.
* @param media - The MediaDetails object containing media information.
* @returns Array of extracted media variants.
*/
const extractVariants = (media: MediaDetails) => {
// The function handles different media types distinctly
// For photos, it extracts JPEG format data
// For videos and GIFs, it processes each variant and sorts them
const variants: MediaVariant[] = [];
switch (media.type) {
case 'photo':
// For photos, we assume a JPEG format; adjust as needed
variants.push({
url: media.media_url_https,
quality: 'original',
aspectRatio: `${media.original_info.width}:${media.original_info.height}`,
mimeType: 'image/jpeg',
altText: media.ext_alt_text,
});
break;
case 'video':
case 'animated_gif':
// For videos and animated GIFs, sort and process each variant
media.video_info.variants
.filter(variant => variant.content_type === 'video/mp4')
.sort((a, b) => (b.bitrate ?? 0) - (a.bitrate ?? 0))
.forEach(variant => {
variants.push({
url: variant.url,
quality: approximateResolution(variant.bitrate ?? 0),
aspectRatio: media.video_info.aspect_ratio.join(':'),
mimeType: variant.content_type,
// Note: File size is not provided by the API
});
});
break;
}
return sortVariants(variants, media.type)
};
/**
* Extracts media items from a Twitter card object.
* Cards are used for non-conventional features of a tweet, like carousel ads or YouTube embeds.
* The function handles different types of cards, including default embeds and unified cards.
* @param card - The TwitterCard object containing card information.
* @returns Array of MediaItem objects extracted from the card.
*/
const extractCardMedia = (card: TwitterCard) => {
// The function parses and extracts media from different card types
// It handles unified cards that contain a carousel of items
// Each media item is processed and added to the result
const additionalItems: MediaItem[] = [];
const cards = card.binding_values;
for (const key in cards) {
const value = cards?.[key];
if (value && value?.image_value) {
const image: ImageValue = value.image_value;
const index = additionalItems.length;
if (additionalItems.length <= 0) {
additionalItems.push({ type: "photo", variants: [] })
}
additionalItems?.[index]?.variants.push({
url: image.url,
quality: 'original', // Twitter cards do not provide different qualities
aspectRatio: `${image.width}:${image.height}`,
mimeType: 'image/jpeg', // Assuming JPEG; adjust as needed
// altText and fileSizeInBytes are not provided in the card
});
}
if (key === "unified_card" && value && value?.string_value) {
// Attempt to parse the unified_card data from the card's binding_values
const unifiedCard = value;
try {
// Parsing the stringified JSON data of the unified_card
const unifiedCardData: UnifiedCardData = JSON.parse(unifiedCard?.string_value!);
// Extracting media_entities from the unified_card
// These entities provide a mapping from media IDs to media details
const mediaEntities = unifiedCardData?.media_entities ?? {};
const componentObjects = unifiedCardData?.component_objects ?? {};
// Iterating over component objects to extract media references
Array.from(Object.entries(componentObjects) ?? [])?.forEach(([, component]) => {
if (component.type === "media" && component.data && component.data.id) {
// Finding the media details using the media ID in the component data
const mediaId = component.data.id;
const media = mediaEntities[mediaId] as unknown as (MediaDetails & CardMediaEntity);
if (media) {
additionalItems.push({
type: media.type,
variants: extractVariants(media)
})
}
}
});
} catch (error) {
console.error("Error parsing unified card data:", error);
}
}
}
// Sorting by width and height (larger images first as a proxy for higher quality)
return additionalItems.map(({ type, variants }): MediaItem => {
return { type, variants: sortVariants(variants, type) }
});
};
/**
* Extracts and formats media details from a tweet object.
* This includes media from the main tweet, quoted tweets, parent tweets, and associated cards.
* @param tweet - The tweet object to extract media from.
* @returns An array of formatted MediaItem objects.
*/
export function extractAndFormatMedia(tweet: Tweet | TweetParent | QuotedTweet): MediaItem[] {
// This function is a comprehensive handler for all media in a tweet
// It ensures all media types (including from cards) are processed
let mediaItems: MediaItem[] = [];
// Process each media in the tweet
// Extract media from the tweet, including quoted and parent tweets
tweet?.mediaDetails?.forEach(media => {
mediaItems.push({
type: media.type,
variants: extractVariants(media)
});
});
// Just-in case there's an edge case when
const quoted_tweet = tweet?.quoted_tweet;
const parent_tweet = tweet?.parent;
quoted_tweet?.mediaDetails?.forEach(media => {
mediaItems.push({
type: media.type,
variants: extractVariants(media)
});
});
parent_tweet?.mediaDetails?.forEach(media => {
mediaItems.push({
type: media.type,
variants: extractVariants(media)
});
});
// Extract media from Twitter card if available
if (tweet.card) {
const cardMedia = extractCardMedia(tweet.card!);
mediaItems = mediaItems.concat(cardMedia);
}
// Extract media from Twitter card if available
if (quoted_tweet?.card) {
const cardMedia = extractCardMedia(quoted_tweet.card!);
mediaItems = mediaItems.concat(cardMedia);
}
// Extract media from Twitter card if available
if (parent_tweet?.card) {
const cardMedia = extractCardMedia(parent_tweet.card!);
mediaItems = mediaItems.concat(cardMedia);
}
return mediaItems;
}
/**
* Fetches tweet embed data from the provided URL.
* Validates the URL and retrieves data using the Twitter syndication API.
* @param url - The URL of the tweet to fetch embed data for.
* @returns The embed data for the tweet, if available.
*/
export async function fetchEmbeddedTweet(url: string) {
// This function interacts with the Twitter API to fetch embed data
// It includes validations and error handling specific to Twitter's API
const parsedURL = new URL(url);
if (!/(ads-twitter\.com|periscope\.tv|pscp\.tv|t\.co|tweetdeck\.com|twimg\.com|twitpic\.com|twitter\.co|twitter\.com|twitterinc\.com|twitteroauth\.com|twitterstat\.us|twttr\.com|x\.com|fixupx\.com|fxtwitter\.com)/.test(parsedURL.hostname)) {
throw new Error(`Invalid URL. "${url}" is not a twitter url`)
}
// Support all the various Twitter URLs
parsedURL.hostname = "twitter.com";
const urlpattern = new URLPattern('http{s}?://twitter.com/:user/status/:id{/}??*');
const exec = urlpattern.exec(parsedURL.href);
if (exec) {
const id = exec.pathname.groups.id;
const url = new URL(`${EMBED_API_URL}/tweet-result`)
// https://cdn.syndication.twimg.com/tweet-result?features=tfw_timeline_list:;tfw_follower_count_sunset:true;tfw_tweet_edit_backend:on;tfw_refsrc_session:on;tfw_fosnr_soft_interventions_enabled:on;tfw_mixed_media_15897:treatment;tfw_experiments_cookie_expiration:1209600;tfw_show_birdwatch_pivots_enabled:on;tfw_duplicate_scribes_to_settings:on;tfw_use_profile_image_shape_enabled:on;tfw_video_hls_dynamic_manifests_15082:true_bitrate;tfw_legacy_timeline_sunset:true;tfw_tweet_edit_frontend:on&id=1754889044423741926&lang=en&token=49559whuarh&ovdffi=l78enholvprp&oreqaz=tlkb0e85f7bc&yb0xad=1fu83tf85hizn&3prkjy=16jgl8eyj9k5e&qr0fey=f8d8rnms2ae&nsosme=f8phiqfk7hr5&mwu396=17vqt618zs5d
url.searchParams.set('id', id!)
url.searchParams.set('lang', 'en')
url.searchParams.set('token', '5')
url.searchParams.set(
'features',
[
'tfw_timeline_list:',
'tfw_follower_count_sunset:true',
'tfw_tweet_edit_backend:on',
'tfw_refsrc_session:on',
'tfw_fosnr_soft_interventions_enabled:on',
'tfw_mixed_media_15897:treatment',
'tfw_experiments_cookie_expiration:1209600',
'tfw_show_birdwatch_pivots_enabled:on',
'tfw_use_profile_image_shape_enabled:on',
'tfw_video_hls_dynamic_manifests_15082:true_bitrate',
'tfw_show_business_verified_badge:on',
'tfw_duplicate_scribes_to_settings:on',
'tfw_show_blue_verified_badge:on',
'tfw_legacy_timeline_sunset:true',
'tfw_show_gov_verified_badge:on',
'tfw_show_business_affiliate_badge:on',
'tfw_tweet_edit_frontend:on',
].join(';')
)
const res = await fetch(url);
const isJson = res.headers.get('content-type')?.includes('application/json')
const data = isJson ? await res.json() : undefined
if (res.ok) return data
if (res.status === 404) return
throw new TwitterApiError({
message: typeof data.error === 'string' ? data.error : 'Bad request.',
status: res.status,
data,
})
}
}
================================================
FILE: src/lib/height.ts
================================================
import { writable } from "svelte/store";
export function syncHeight(el: HTMLElement, initial = 0) {
return writable(initial, (set) => {
if (!el) {
return;
}
let ro = new ResizeObserver(() => {
if (el) {
return set(el.offsetHeight);
}
});
ro.observe(el);
return () => ro.disconnect();
});
}
================================================
FILE: src/lib/m3u8/mod.ts
================================================
// From https://deno.land/x/m3u8@v0.8.0/src/mod.ts by @fbritoferreira
// https://github.com/fbritoferreira/m3u8-parser/tree/main
export { M3U8Parser } from "./parser.ts";
export {
Attributes,
Options,
Parameters,
PlaylistItemTvgValidator,
PlaylistItemValidator,
} from "./types.ts";
export type {
ParsedLine,
Playlist,
PlaylistHeader,
PlaylistItem,
PlaylistItemTvg,
} from "./types.ts";
export interface Manifest {
allowCache: boolean;
endList: boolean;
mediaSequence: number;
discontinuitySequence: number;
playlistType: string;
custom: Record<string, unknown>;
playlists: Array<{
attributes: Record<string, unknown>;
uri?: string;
manifest: Manifest;
}>;
mediaGroups: {
AUDIO: Record<string, Record<string, {
default: boolean;
autoselect: boolean;
language: string;
uri: string;
instreamId: string;
characteristics: string;
forced: boolean;
}>>;
VIDEO: Record<string, unknown>;
'CLOSED-CAPTIONS': Record<string, unknown>;
SUBTITLES: Record<string, unknown>;
};
dateTimeString: string;
dateTimeObject: Date;
targetDuration: number;
totalDuration: number;
discontinuityStarts: number[];
segments: Array<{
byterange: {
length: number;
offset: number;
};
duration: number;
attributes: Record<string, unknown>;
discontinuity: number;
uri: string;
timeline: number;
key: {
method: string;
uri: string;
iv: string;
};
map: {
uri: string;
byterange: {
length: number;
offset: number;
};
};
'cue-out': string;
'cue-out-cont': string;
'cue-in': string;
custom: Record<string, unknown>;
}>;
}
================================================
FILE: src/lib/m3u8/parser.ts
================================================
import {
Attributes,
Options,
Parameters,
type ParsedLine,
type Playlist,
type PlaylistHeader,
type PlaylistItem,
PlaylistItemValidator,
} from "./types.ts";
export class M3U8Parser {
public rawPlaylist = "";
public filteredMap: Map<string, Playlist> = new Map();
public items: Map<number, PlaylistItem> = new Map();
public header: PlaylistHeader = {} as PlaylistHeader;
public groups: Set<string> = new Set();
constructor({ playlist, url }: { playlist?: string; url?: string }) {
if (playlist) {
this.rawPlaylist = playlist;
this.parse(playlist);
}
if (url) {
this.fetchPlaylist({ url });
}
}
private parse(raw: string): void {
let i = 0;
const lines = raw.split("\n").map(this.parseLine);
const firstLine = lines.find((l) => l.index === 0);
if (!firstLine || !/^#EXTM3U/.test(firstLine.raw)) {
throw new Error("Playlist is not valid");
}
this.parseHeader(firstLine?.raw);
for (const line of lines) {
if (line.index === 0) continue;
const string = line.raw.toString().trim();
if (string.startsWith("#EXTINF:")) {
this.items.set(i, this.handleEXTINF(line));
} else if (string.startsWith("#EXTVLCOPT:")) {
if (!this.items.get(i)) continue;
this.handleEXTVLCOPT(string, i);
} else if (string.startsWith("#EXTGRP:")) {
if (!this.items.get(i)) continue;
this.handleEXTGRP(string, i);
} else {
const item = this.items.get(i);
if (!item) continue;
const url = this.getUrl(string);
const user_agent = this.getParameter(string, Parameters.USER_AGENT);
const referrer = this.getParameter(string, Parameters.REFERER);
this.groups.add(item.group.title);
if (url) {
this.items.set(
i,
PlaylistItemValidator.parse({
...item,
url,
http: {
...item.http,
user_agent,
referrer,
},
raw: this.mergeRaw(item, line),
}),
);
i++;
} else {
this.items.set(
i,
PlaylistItemValidator.parse({
...item,
raw: this.mergeRaw(item, line),
}),
);
}
}
}
}
private mergeRaw(item: PlaylistItem, line: ParsedLine | string) {
if (typeof line === "string") {
return item?.raw ? item.raw.concat(`\n${line}`) : `${line}`;
}
return item?.raw ? item.raw.concat(`\n${line.raw}`) : `${line.raw}`;
}
parseLine(line: string, index: number): ParsedLine {
return {
index,
raw: line,
};
}
parseHeader(line: string) {
const supportedAttrs = [Attributes.X_TVG_URL, Attributes.URL_TVG];
const attrs = new Map();
for (const attrName of supportedAttrs) {
const tvgUrl = this.getAttribute(attrName, line);
if (tvgUrl) {
attrs.set(attrName, tvgUrl);
}
}
this.header = {
attrs: Object.fromEntries(attrs.entries()),
raw: line,
};
}
private handleEXTGRP(line: string, index: number) {
const item = this.items.get(index);
if (!item) {
return;
}
this.items.set(
index,
PlaylistItemValidator.parse({
...item,
group: {
...item.group,
title: this.getValue(line) ?? item?.group.title,
},
raw: this.mergeRaw(item, line),
}),
);
}
private handleEXTVLCOPT(line: string, index: number) {
const item = this.items.get(index);
this.items.set(
index,
PlaylistItemValidator.parse({
...item,
http: {
...item?.http,
"user-agent": this.getOption(line, Options.HTTP_USER_AGENT) ??
item?.http["user-agent"],
referrer: this.getOption(line, Options.HTTP_REFERRER) ??
item?.http.referrer,
},
raw: `\r\n${line}`,
}),
);
}
private handleEXTINF(line: ParsedLine): PlaylistItem {
return PlaylistItemValidator.parse({
name: this.getName(line.raw),
tvg: {
id: this.getAttribute(Attributes.TVG_ID, line.raw),
name: this.getAttribute(Attributes.TVG_NAME, line.raw),
logo: this.getAttribute(Attributes.TVG_LOGO, line.raw),
url: this.getAttribute(Attributes.TVG_URL, line.raw),
rec: this.getAttribute(Attributes.TVG_REC, line.raw),
},
group: {
title: this.getAttribute(Attributes.GROUP_TITLE, line.raw),
},
http: {
referrer: "",
"user-agent": this.getAttribute(Attributes.USER_AGENT, line.raw),
},
url: undefined,
raw: line.raw,
index: line.index + 1,
catchup: {
type: this.getAttribute(Attributes.CATCHUP, line.raw),
days: this.getAttribute(Attributes.CATCHUP_DAYS, line.raw),
source: this.getAttribute(Attributes.CATCHUP_SOURCE, line.raw),
},
timeshift: this.getAttribute(Attributes.TIMESHIFT, line.raw),
});
}
private getAttribute(name: Attributes, line: string) {
const regex = new RegExp(name + '="(.*?)"', "gi");
const match = regex.exec(line);
return (match && match[1] ? match[1] : "")?.trimStart()?.trimEnd();
}
private getName(line: string) {
const name = line?.split(/[\r\n]+/)?.shift()?.split(",")
.pop()?.trimStart()?.trimEnd();
return name || "";
}
private getOption(line: string, name: Options) {
const regex = new RegExp(":" + name + "=(.*)", "gi");
const match = regex.exec(line);
return match && match[1] && typeof match[1] === "string"
? match[1].replace(/\"/g, "")
: "";
}
private getValue(line: string) {
const regex = new RegExp(":(.*)", "gi");
const match = regex.exec(line);
return match && match[1] && typeof match[1] === "string"
? match[1].replace(/\"/g, "")
: "";
}
private getUrl(line: string) {
return line.split("|")[0] || "";
}
private getParameter(line: string, name: Parameters) {
const params = line.replace(/^(.*)\|/, "");
const regex = new RegExp(name + "=(\\w[^&]*)", "gi");
const match = regex.exec(params);
return match && match[1] ? match[1] : "";
}
public getPlaylist(): Playlist {
return {
header: this.header,
items: Array.from(this.items.values()),
raw: this.rawPlaylist,
};
}
public getPlaylistByGroup(group: string): Playlist {
const key = group.split("").join("-");
const cached = this.filteredMap.get(key);
if (cached) {
return cached;
}
const playlist = {
header: this.header,
items: this.getPlaylistItems(group),
};
this.filteredMap.set(key, playlist);
return playlist;
}
private getPlaylistItems(group: string): PlaylistItem[] {
return Array.from(this.items.values()).filter((item) =>
item?.group?.title?.toLowerCase().startsWith(group.toLowerCase())
);
}
public getPlaylistsByGroups(groups: string[]): Playlist {
const key = groups.join("-");
const cached = this.filteredMap.get(key);
if (cached) {
return cached;
}
const items = groups.reduce((acc: PlaylistItem[], group: string) => {
const playlistItems = this.getPlaylistItems(group);
return [
...acc,
...playlistItems,
];
}, []);
const playlist = {
header: this.header,
items,
};
this.filteredMap.set(key, playlist);
return playlist;
}
public get playlistGroups() {
return Array.from(this.groups);
}
public write(): string {
const playlist = this.getPlaylist();
return `${playlist.header.raw}\n`.concat(
`${playlist.items.map((item) => item.raw).join("\n")}`,
);
}
public updateItems(items: Map<number, PlaylistItem>) {
this.items = items;
}
public updatePlaylist(playlist: Playlist) {
const items = new Map();
let i = 0;
if (playlist.items) {
playlist.items.forEach((item) => {
items.set(i, PlaylistItemValidator.parse(item));
i++;
});
}
this.items = items;
}
public async fetchPlaylist({ url }: { url: string }) {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`Failed to fetch playlist: ${response.status}`);
}
const playlist = await response.text();
this.rawPlaylist = playlist;
this.parse(playlist);
}
public filterPlaylist(
filters?: string[],
) {
const groupsToFilter = filters?.map((filter) =>
this.playlistGroups.filter((p) =>
p.toLowerCase().startsWith(filter.toLowerCase())
)
).flat();
if (groupsToFilter) {
const filteredItems = this.getPlaylistsByGroups(groupsToFilter);
this.updatePlaylist(filteredItems);
}
}
}
================================================
FILE: src/lib/m3u8/traverse.ts
================================================
import { M3uMedia, M3uParser } from "m3u-parser-generator"
import { urlToFilePath } from "./urls.ts";
/**
* Converts an ArrayBuffer of an M3U8 file into a parsed representation.
*
* This function is crucial for processing M3U8 files, which are used for streaming media playlists.
* It takes the raw binary data of the M3U8 file, decodes it to text, and then uses the m3u8Parser
* library to parse the text into a structured format. The parsing process identifies and organizes
* various elements of the M3U8 file like segments, playlists, etc., which are essential for
* subsequent processing and traversal.
*
* The use of TextDecoder for converting ArrayBuffer to text ensures efficient handling of binary
* data, especially for large files, which is common in streaming contexts.
*
* @param arrbuf - The ArrayBuffer containing the M3U8 file data.
* @returns A parser object that represents the parsed structure of the M3U8 file.
*/
export function parseManifest(arrbuf: ArrayBuffer) {
// Decode the ArrayBuffer to a text string using TextDecoder.
const toText = new TextDecoder().decode(arrbuf);
const playlist = M3uParser.parse(toText);
return playlist;
}
/**
* Traverse M3U8 manifests and fetches the referenced resources within a 2-minute limit.
*
* This function is optimized for performance by minimizing redundant array operations and
* efficiently managing network requests. It processes an M3U8 file, fetching all unique URIs
* referenced in it and any nested M3U8 files, and aborts if the operation exceeds 2 minutes.
*
* Performance is optimized by using Sets for deduplication and minimizing array transformations.
* The function handles edge cases like undefined URIs and nested M3U8 files.
*
* @param arrbuf - An ArrayBuffer containing the contents of the M3U8 file.
* @param baseUrl - The base URL used for resolving relative URIs in the M3U8 file.
* @param batchSize - Batch the fetch requests in increments of `batchSize`, this is primarily used for resolving relative URIs in the M3U8 file.
* @param timeout - Timeout for batch requests.
*/
export async function traverseM3U8Manifests(arrbuf: ArrayBuffer, baseUrl: URL, batchSize = 10, timeout = 120_000) {
const abortCtrl = new AbortController();
const timeoutId = setTimeout(() => abortCtrl.abort(), timeout); // 2-minute timeout
const fileMap = new Map<string, ArrayBuffer>()
try {
const playlist = parseManifest(arrbuf);
const { medias } = playlist;
const modifiedMedias: M3uMedia[] = [];
// Initial deduplication of URIs using a Set to improve performance.
const uris = new Set<string>(
(medias ?? []).map(item => {
modifiedMedias.push({ ...item, location: urlToFilePath(item.location) });
return item.location;
}).filter((uri): uri is string => uri !== undefined)
);
const toProcess = Array.from(uris); // Array of URIs to process
while (toProcess.length > 0) {
// Processing URIs in batches to manage memory and network load.
const batch = toProcess.splice(0, batchSize);
// Fetching each URI in the batch in parallel for efficiency.
const fetchedBuffers = await Promise.all(batch.map(async uri => {
const url = new URL(uri, baseUrl);
const buf = await fetch(url, { signal: abortCtrl.signal }).then(resp => resp.arrayBuffer());
return [url, buf] as const;
}));
// Post-fetch processing to parse nested M3U8 files and update URI lists.
batch.forEach((uri, index) => {
const [url, buf] = fetchedBuffers[index];
fileMap.set(urlToFilePath(uri), buf);
// Checking and parsing nested M3U8 files for additional URIs.
if (/\.(m3u8|m3u)$/.test(url.pathname)) {
const subPlaylist = parseManifest(buf);
const { medias: subMedias } = subPlaylist;
const modifiedSubMedias: M3uMedia[] = [];
(subMedias ?? []).forEach(item => {
const _uri = item?.location;
if (_uri && !uris.has(_uri)) {
modifiedSubMedias.push({ ...item, location: urlToFilePath(item.location) });
uris.add(_uri);
toProcess.push(_uri); // Adding new URIs for processing
}
});
subPlaylist.medias = modifiedSubMedias;
fileMap.set(urlToFilePath(uri), new TextEncoder().encode(subPlaylist.getM3uString()));
}
});
}
playlist.medias = modifiedMedias;
fileMap.set(urlToFilePath(baseUrl.href), new TextEncoder().encode(playlist.getM3uString()));
return fileMap
} catch (error) {
console.error("Error parsing M3U8 manifest:", error);
// Error handling for network failures, parsing errors, etc.
} finally {
clearTimeout(timeoutId); // Cleaning up the timeout to prevent leaks
}
}
================================================
FILE: src/lib/m3u8/types.ts
================================================
import { z } from "zod";
export interface PlaylistHeader {
attrs: {
"x-tvg-url": string;
};
raw: string;
}
export const PlaylistItemTvgValidator = z.object({
id: z.string(),
name: z.string(),
url: z.string(),
logo: z.string(),
rec: z.string(),
});
export type PlaylistItemTvg = z.infer<typeof PlaylistItemTvgValidator>;
export const PlaylistItemValidator = z.object({
name: z.string(),
index: z.number(),
tvg: PlaylistItemTvgValidator,
group: z.object({
title: z.string(),
}),
http: z.object({
referrer: z.string(),
"user-agent": z.string(),
}),
url: z.string().optional(),
raw: z.string(),
timeshift: z.string(),
catchup: z.object({
type: z.string(),
source: z.string(),
days: z.string(),
}),
});
export type PlaylistItem = z.infer<typeof PlaylistItemValidator>;
export interface Playlist {
header: PlaylistHeader;
items: PlaylistItem[];
raw?: string;
}
export type ParsedLine = {
index: number;
raw: string;
};
export enum Attributes {
TVG_ID = "tvg-id",
X_TVG_URL = "x-tvg-url",
URL_TVG = "url-tvg",
TVG_NAME = "tvg-name",
TVG_LOGO = "tvg-logo",
TVG_URL = "tvg-url",
TVG_REC = "tvg-rec",
GROUP_TITLE = "group-title",
USER_AGENT = "user-agent",
CATCHUP = "catchup",
CATCHUP_DAYS = "catchup-days",
CATCHUP_SOURCE = "catchup-source",
TIMESHIFT = "timeshift",
}
export enum Options {
HTTP_REFERRER = "http-referrer",
HTTP_USER_AGENT = "http-user-agent",
}
export enum Parameters {
USER_AGENT = "user-agent",
REFERER = "referer",
}
================================================
FILE: src/lib/m3u8/urls.ts
================================================
/**
* Converts a URL to a file path including the origin.
*
* This function takes a URL and transforms it into a file path format. The origin of the URL
* (protocol and domain) is included in the path, and special characters are handled to ensure
* a valid file path is generated. This is useful for creating unique file paths based on URLs.
*
* @param urlStr - The URL string to be converted to a file path.
* @returns A string representing the file path including the URL's origin.
*/
export function urlToFilePath(urlStr: string): string {
const url = new URL(urlStr);
// Replace special characters that are not valid in file paths.
// Adjust the replacement logic based on your file system and requirements.
const safePath = url.pathname.replace(/[^a-zA-Z0-9\-_\.\/]/g, '_');
// Combine the origin and the pathname to form the file path.
// The origin replaces '://' with '_' and removes any trailing slashes for a cleaner path.
return `${url.origin.replace(/[:\/]/g, '_')}${safePath}`;
}
================================================
FILE: src/lib/path/mod.ts
================================================
// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.
// This module is browser compatible.
// Non-alphabetic chars.
export const CHAR_DOT = 46; /* . */
export const CHAR_FORWARD_SLASH = 47; /* / */
// Ported from https://github.com/browserify/path-browserify/
// This module is browser compatible.
export function isPosixPathSeparator(code: number): boolean {
return code === CHAR_FORWARD_SLASH;
}
export function assertPath(path: string) {
if (typeof path !== "string") {
throw new TypeError(
`Path must be a string. Received ${JSON.stringify(path)}`,
);
}
}
/**
* Return the extension of the `path` with leading period.
* @param path with extension
* @returns extension (ex. for `file.ts` returns `.ts`)
*/
export function extname(path: string): string {
assertPath(path);
let startDot = -1;
let startPart = 0;
let end = -1;
let matchedSlash = true;
// Track the state of characters (if any) we see before our first dot and
// after any path separator we find
let preDotState = 0;
for (let i = path.length - 1; i >= 0; --i) {
const code = path.charCodeAt(i);
if (isPosixPathSeparator(code)) {
// If we reached a path separator that was not part of a set of path
// separators at the end of the string, stop now
if (!matchedSlash) {
startPart = i + 1;
break;
}
continue;
}
if (end === -1) {
// We saw the first non-path separator, mark this as the end of our
// extension
matchedSlash = false;
end = i + 1;
}
if (code === CHAR_DOT) {
// If this is our first dot, mark it as the start of our extension
if (startDot === -1) startDot = i;
else if (preDotState !== 1) preDotState = 1;
} else if (startDot !== -1) {
// We saw a non-dot and non-path separator before our dot, so we should
// have a good chance at having a non-empty extension
preDotState = -1;
}
}
if (
startDot === -1 ||
end === -1 ||
// We saw a non-dot character immediately before the dot
preDotState === 0 ||
// The (right-most) trimmed path component is exactly '..'
(preDotState === 1 && startDot === end - 1 && startDot === startPart + 1)
) {
return "";
}
return path.slice(startDot, end);
}
================================================
FILE: src/lib/search.ts
================================================
import type { ChangeSpec } from "@codemirror/state";
// import type { FFmpeg } from "@ffmpeg/ffmpeg";
import type { FFmpeg } from "@ffmpeg.wasm/main";
import type { EditorView } from "codemirror";
import { get } from "svelte/store";
import { abortCtlr, error, loading, EMPTY_CONSOLE_TEXT } from "./state";
import { traverseM3U8Manifests } from "./m3u8/traverse";
import { urlToFilePath } from "./m3u8/urls";
import { transcode } from "./transcode";
import { fetchFile } from "../components/ffmpeg";
export async function onSearch(e?: Event, ffmpeg?: FFmpeg, value?: string, consoleView?: EditorView, popState = false) {
e?.preventDefault?.();
abortCtlr.set(new AbortController());
error.set(null);
if (!value) return;
if (value && value.length <= 0) return;
loading.set(true);
try {
if (!ffmpeg || !ffmpeg?.isLoaded?.()) return;
const arrbuf = await fetchFile(value, { signal: get(abortCtlr).signal });
let inputArrBuf = arrbuf;
let _url = new URL(value);
console.log({ _url });
if (/\.(m3u8|m3u)$/.test(_url?.pathname)) {
try {
const map = await traverseM3U8Manifests(arrbuf.buffer, _url);
if (map) {
const modifiedInputArrBuf = map.get(urlToFilePath(_url.href));
if (modifiedInputArrBuf)
inputArrBuf = new Uint8Array(modifiedInputArrBuf);
map?.forEach?.((buf, url) => {
if (!buf) return;
try {
ffmpeg.FS("writeFile", url, new Uint8Array(buf));
// ffmpeg.writeFile(url, new Uint8Array(buf));
if (!consoleView) return;
const doc = consoleView.state.doc;
let changes: ChangeSpec[] = [];
if (doc.toString().trim() === EMPTY_CONSOLE_TEXT) {
changes.push({ from: 0, to: doc.length });
}
// (Assume view is an EditorView instance holding the document "123".)
const message = `[url] ${url}\n`;
changes.push({ from: doc.length, insert: message });
let transaction = consoleView.state.update({ changes });
// At this point the view still shows the old state.
consoleView.dispatch(transaction);
// And now it shows the new state.
} catch (e) {
console.log(url);
console.warn(e);
}
});
}
} catch (e) {
console.warn(`Cannot parse "${value}" as m3u8 playlist`, e);
}
}
await transcode({
target: {
// @ts-ignore
files: [inputArrBuf]
}
}, ffmpeg, value, popState);
} catch (e) {
error.set((e ?? "").toString());
console.warn(e);
} finally {
loading.set(false);
}
}
================================================
FILE: src/lib/shell-lang.ts
================================================
import type { StreamParser } from "@codemirror/language";
var words: Record<string, string> = {};
function define(style: string, dict: string | any[]) {
for (var i = 0; i < dict.length; i++) {
words[dict[i]] = style;
}
};
var commonAtoms = ["true", "false"];
var commonKeywords = ["if", "then", "do", "else", "elif", "while", "until", "for", "in", "esac", "fi",
"fin", "fil", "done", "exit", "set", "unset", "export", "function"];
var commonCommands = ["ab", "awk", "bash", "beep", "cat", "cc", "cd", "chown", "chmod", "chroot", "clear",
"cp", "curl", "cut", "diff", "echo", "find", "gawk", "gcc", "get", "git", "grep", "hg", "kill", "killall",
"ln", "ls", "make", "mkdir", "openssl", "mv", "nc", "nl", "node", "npm", "ping", "ps", "restart", "rm",
"rmdir", "sed", "service", "sh", "shopt", "shred", "source", "sort", "sleep", "ssh", "start", "stop",
"su", "sudo", "svn", "tee", "telnet", "top", "touch", "vi", "vim", "wall", "wc", "wget", "who", "write",
"yes", "zsh"];
define('atom', commonAtoms);
define('keyword', commonKeywords);
define('builtin', commonCommands);
function tokenBase(stream: { eatSpace: () => any; sol: () => any; next: () => string; eat: (arg0: string) => string; skipToEnd: () => void; eatWhile: (arg0: RegExp) => void; match: (arg0: string | RegExp) => any; eol: () => any; peek: () => string; current: () => any; }, state: { tokens: { (stream: any, state: any): any; (stream: any, state: any): any; (stream: any, state: any): string; }[]; }) {
if (stream.eatSpace()) return null;
var sol = stream.sol();
var ch = stream.next();
if (ch === '\\') {
stream.next();
return null;
}
if (ch === '\'' || ch === '"' || ch === '`') {
state.tokens.unshift(tokenString(ch, ch === "`" ? "quote" : "string"));
return tokenize(stream, state);
}
if (ch === '#') {
if (sol && stream.eat('!')) {
stream.skipToEnd();
return 'meta'; // 'comment'?
}
stream.skipToEnd();
return 'comment';
}
if (ch === '$') {
state.tokens.unshift(tokenDollar);
return tokenize(stream, state);
}
if (ch === '+' || ch === '=') {
return 'operator';
}
if (ch === '-') {
stream.eat('-');
stream.eatWhile(/\w/);
return 'attribute';
}
if (ch == "<") {
if (stream.match("<<")) return "operator"
var heredoc = stream.match(/^<-?\s*['"]?([^'"]*)['"]?/)
if (heredoc) {
state.tokens.unshift(tokenHeredoc(heredoc[1]))
return 'string.special'
}
}
if (/\d/.test(ch)) {
stream.eatWhile(/\d/);
if (stream.eol() || !/\w/.test(stream.peek())) {
return 'number';
}
}
stream.eatWhile(/[\w-]/);
var cur = stream.current();
if (stream.peek() === '=' && /\w+/.test(cur)) return 'def';
return words.hasOwnProperty(cur) ? words[cur] : null;
}
function tokenString(quote: string, style: string) {
var close = quote == "(" ? ")" : quote == "{" ? "}" : quote
return function (stream: { next: () => any; peek: () => any; backUp: (arg0: number) => void; }, state: { tokens: { (stream: any, state: any): any; (stream: any, state: any): any; (stream: any, state: any): any; }[]; }) {
var next, escaped = false;
while ((next = stream.next()) != null) {
if (next === close && !escaped) {
state.tokens.shift();
break;
} else if (next === '$' && !escaped && quote !== "'" && stream.peek() != close) {
escaped = true;
stream.backUp(1);
state.tokens.unshift(tokenDollar);
break;
} else if (!escaped && quote !== close && next === quote) {
state.tokens.unshift(tokenString(quote, style))
return tokenize(stream, state)
} else if (!escaped && /['"]/.test(next) && !/['"]/.test(quote)) {
state.tokens.unshift(tokenStringStart(next, "string"));
stream.backUp(1);
break;
}
escaped = !escaped && next === '\\';
}
return style;
};
};
function tokenStringStart(quote: any, style: string) {
return function (stream: { next: () => void; }, state: { tokens: ((stream: any, state: any) => any)[]; }) {
state.tokens[0] = tokenString(quote, style)
stream.next()
return tokenize(stream, state)
}
}
var tokenDollar = function (stream: { eat: (arg0: string) => void; next: () => any; eatWhile: (arg0: RegExp) => void; }, state: { tokens: ((stream: any, state: any) => any)[] | void[]; }) {
if (state.tokens.length > 1) stream.eat('$');
var ch = stream.next()
if (/['"({]/.test(ch)) {
state.tokens[0] = tokenString(ch, ch == "(" ? "quote" : ch == "{" ? "def" : "string");
return tokenize(stream, state);
}
if (!/\d/.test(ch)) stream.eatWhile(/\w/);
state.tokens.shift();
return 'def';
};
function tokenHeredoc(delim: any) {
return function (stream: { sol: () => any; string: any; skipToEnd: () => void; }, state: { tokens: void[]; }) {
if (stream.sol() && stream.string == delim) state.tokens.shift()
stream.skipToEnd()
return "string.special"
}
}
function tokenize(stream: any, state: { tokens: any[]; }) {
return (state.tokens[0] || tokenBase)(stream, state);
};
export const shell: StreamParser<unknown> = {
name: "shell",
startState: function () { return { tokens: [] }; },
token: function (stream: any, state: any) {
return tokenize(stream, state);
},
languageData: {
autocomplete: commonAtoms.concat(commonKeywords, commonCommands),
closeBrackets: { brackets: ["(", "[", "{", "'", '"', "`"] },
commentTokens: { line: "#" }
}
};
================================================
FILE: src/lib/state.ts
================================================
import { writable } from "svelte/store";
export interface FFmpegConfig {
args: string[];
inFilename: string;
outFilename: string;
mediaType: string;
forceUseArgs: string[] | null;
}
export const abortCtlr = writable(new AbortController());
export const progress = writable(0);
export const loading = writable(false);
export const initializing = writable(false);
export const fileOpenMode = writable(false);
export const error = writable<string | null>(null);
export const results = writable<
Array<{ type?: string | null; url?: string | null }>
>([]);
export const samples = new Map([
[
"webm -> mp4",
{
args: ["-c:v", "libvpx"],
inFilename: "video.webm",
outFilename: "video.mp4",
mediaType: "video/mp4",
forceUseArgs: null,
},
],
[
"avi -> mp4",
{
args: ["-c:v", "libx264"],
inFilename: "video.avi",
outFilename: "video.mp4",
mediaType: "video/mp4",
forceUseArgs: null,
},
],
[
"mov -> mp4",
{
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: "video.mov",
outFilename: "video.mp4",
mediaType: "video/mp4",
forceUseArgs: null,
},
],
[
"wmv -> mp4",
{
args: [],
inFilename: "video.wmv",
outFilename: "video.mp4",
mediaType: "video/mp4",
forceUseArgs: null,
},
],
[
"avi -> webm",
{
args: ["-c:v", "libvpx"],
inFilename: "video.avi",
outFilename: "video.webm",
mediaType: "video/webm",
forceUseArgs: null,
},
],
[
"mp4 -> wmv",
{
args: [],
inFilename: "video.mp4",
outFilename: "video.wmv",
mediaType: "video/x-ms-wmv",
forceUseArgs: null,
},
],
[
"gif -> mp4",
{
args: [
"-movflags",
"faststart",
"-pix_fmt",
"yuv420p",
"-vf",
"scale=trunc(iw/2)*2:trunc(ih/2)*2",
],
inFilename: "video.gif",
outFilename: "image.mp4",
mediaType: "video/mp4",
forceUseArgs: null,
},
],
[
"mp4 -> gif",
{
args: [],
inFilename: "video.mp4",
outFilename: "image.gif",
mediaType: "image/gif",
forceUseArgs: null,
},
],
[
"mp3 -> mp4",
{
args: ["-c:v", "libvpx"],
inFilename: "audio.mp3",
outFilename: "video.mp4",
mediaType: "video/mp4",
forceUseArgs: null,
},
],
[
"wav -> mp3",
{
args: ["-c:a", "libmp3lame"],
inFilename: "audio.wav",
outFilename: "audio.mp3",
mediaType: "audio/mpeg",
forceUseArgs: null,
},
],
[
"mp4 -> mov",
{
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: "video.mp4",
outFilename: "video.mov",
mediaType: "video/quicktime",
forceUseArgs: null,
},
],
[
"mp4 -> mkv",
{
args: ["-c:v", "libvpx", "-c:a", "libvorbis"],
inFilename: "video.mp4",
outFilename: "video.mkv",
mediaType: "video/x-matroska",
forceUseArgs: null,
},
],
[
"mp4 -> ogg",
{
args: ["-c:a", "libvorbis"],
inFilename: "video.mp4",
outFilename: "audio.ogg",
mediaType: "audio/ogg",
forceUseArgs: null,
},
],
[
"webm -> mkv",
{
args: ["-c:v", "copy", "-c:a", "flac"],
inFilename: "video.webm",
outFilename: "video.mkv",
mediaType: "video/x-matroska",
forceUseArgs: null,
},
],
[
"mp3 -> ogg",
{
args: ["-c:a", "libvorbis"],
inFilename: "audio.mp3",
outFilename: "audio.ogg",
mediaType: "audio/ogg",
forceUseArgs: null,
},
],
[
"mp3 -> wav",
{
args: ["-c:a", "libmp3lame"],
inFilename: "audio.mp3",
outFilename: "audio.wav",
mediaType: "video/x-ms-wmv",
forceUseArgs: null,
},
],
[
"mp4 -> mp3",
{
args: ["-c:a", "libmp3lame"],
inFilename: "video.mp4",
outFilename: "audio.mp3",
mediaType: "audio/mpeg",
forceUseArgs: null,
},
],
[
"webm -> gif",
{
args: ["-crf", "20", "-movflags", "faststart"],
inFilename: "video.webm",
outFilename: "image.gif",
mediaType: "image/gif",
forceUseArgs: null,
},
],
[
"gif -> webm",
{
args: [
"-c:v",
"vp8",
"-quality",
"good",
"-movflags",
"faststart",
"-pix_fmt",
"yuv420p",
"-crf",
"30",
],
inFilename: "image.gif",
outFilename: "video.webm",
mediaType: "video/webm",
forceUseArgs: null,
},
],
[
"mp4 -> webm",
{
args: "-c:v libvpx".split(" "),
inFilename: "video.mp4",
outFilename: "video.webm",
mediaType: "video/webm",
forceUseArgs: null,
},
],
[
"mp4 -> avi",
{
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: "video.mp4",
outFilename: "video.avi",
mediaType: "video/x-msvideo",
forceUseArgs: null,
},
],
[
"webm -> avi",
{
args: ["-vcodec", "copy", "-acodec", "copy"],
inFilename: "video.webm",
outFilename: "video.avi",
mediaType: "video/x-msvideo",
forceUseArgs: null,
},
],
[
"m3u8 -> mp4",
{
// args: ["-c", "copy", "-bsf:a", "aac_adtstoasc"],
inFilename: "video.m3u8",
outFilename: "video.mp4",
mediaType: "video/mp4",
forceUseArgs: [
"-protocol_whitelist",
"file,http,https,tcp,tls,crypto",
"-i",
"video.m3u8",
"-c",
"copy",
"-bsf:a",
"aac_adtstoasc",
"video.mp4",
],
},
],
[
"mp4 -> m3u8",
{
args: "-b:v 1M -g 60 -hls_time 2 -hls_list_size 0 -hls_segment_size 500000".split(
" "
),
inFilename: "video.mp4",
outFilename: "video.m3u8",
mediaType: "vnd.apple.mpegURL",
},
],
[
"mp4 -> ts",
{
args: [
"-c:v",
"mpeg2video",
"-qscale:v",
"2",
"-c:a",
"mp2",
"-b:a",
"192k",
],
inFilename: "video.mp4",
outFilename: "video.ts",
mediaType: "video/mp2t",
},
],
]);
export const samplesArr = Array.from(samples.entries());
export const EMPTY_CONSOLE_TEXT = "No Logs...";
export const FFMPEG_DEFAULT_OPTS: FFmpegConfig = {
args: ["-c:v", "libx264"],
inFilename: "video.avi",
outFilename: "video.mp4",
mediaType: "video/mp4",
forceUseArgs: null,
};
export const ffmpegOpts = writable(
Object.assign({}, FFMPEG_DEFAULT_OPTS)
);
================================================
FILE: src/lib/transcode.ts
================================================
// import type { FFmpeg } from "@ffmpeg/ffmpeg";
import type { FFmpeg } from "@ffmpeg.wasm/main";
import { get } from "svelte/store";
import { abortCtlr, error, ffmpegOpts, loading, results } from "./state";
import { fetchFile } from "../components/ffmpeg";
import { tryURL } from "./utils/url";
export async function transcode({ target }: Event & { currentTarget: EventTarget & HTMLInputElement }, ffmpeg: FFmpeg, value: string, popState = false) {
const ffmpegOptions = get(ffmpegOpts);
const { files } = target as HTMLInputElement;
const file = files?.[0];
error.set(null);
loading.set(true);
try {
if (!file) return;
if (!ffmpeg || !ffmpeg?.isLoaded?.()) return;
abortCtlr.set(new AbortController());
// await ffmpeg.writeFile(
// ffmpegOptions.inFilename,
// await fetchFile(file, { signal: get(abortCtlr).signal })
// );
await ffmpeg.FS(
"writeFile",
ffmpegOptions.inFilename,
await fetchFile(file, { signal: get(abortCtlr).signal })
);
if (Array.isArray(ffmpegOptions.forceUseArgs)) {
await ffmpeg.run(...ffmpegOptions.forceUseArgs);
// await ffmpeg.exec(ffmpegOptions.forceUseArgs);
} else {
// await ffmpeg.exec([
// "-i",
// ffmpegOptions.inFilename,
// ...ffmpegOptions.args,
// ffmpegOptions.outFilename,
// ]);
await ffmpeg.run(...[
"-i",
ffmpegOptions.inFilename,
...ffmpegOptions.args,
ffmpegOptions.outFilename,
]);
}
const { mediaType } = ffmpegOptions;
// const data = await ffmpeg.readFile(ffmpegOptions.outFilename);
const data = await ffmpeg.FS("readFile", ffmpegOptions.outFilename);
const url = URL.createObjectURL(
new Blob([data], { type: mediaType })
);
const tempResults = Array.from(get(results));
tempResults.unshift({ url, type: getMediaType(mediaType) });
results.set(tempResults);
// ffmpeg.terminate();
ffmpeg.exit();
await ffmpeg.load();
if (!popState && tryURL(value)) {
const newURL = new URL(globalThis.location.href);
newURL.search = new URLSearchParams({
q: value,
config: JSON.stringify(ffmpegOpts),
}).toString();
globalThis?.history?.pushState?.(null, "", newURL);
}
} catch (e) {
error.set((e ?? "").toString());
console.warn(e);
} finally {
loading.set(false);
}
}
export function getMediaType(mediaType: string) {
return (
(/^(video|audio)/.test(mediaType) || mediaType === "vnd.apple.mpegURL") ? "video" : "image"
)
}
================================================
FILE: src/lib/utils/chunk.ts
================================================
// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.
// This module is browser compatible.
/**
* Splits the given array into chunks of the given size and returns them.
*
* @example
* ```ts
* import { chunk } from "https://deno.land/std@$STD_VERSION/collections/chunk.ts";
* import { assertEquals } from "https://deno.land/std@$STD_VERSION/testing/asserts.ts";
*
* const words = [
* "lorem",
* "ipsum",
* "dolor",
* "sit",
* "amet",
* "consetetur",
* "sadipscing",
* ];
* const chunks = chunk(words, 3);
*
* assertEquals(
* chunks,
* [
* ["lorem", "ipsum", "dolor"],
* ["sit", "amet", "consetetur"],
* ["sadipscing"],
* ],
* );
* ```
*/
export function chunk<T>(array: readonly T[], size: number): T[][] {
if (size <= 0 || !Number.isInteger(size)) {
throw new Error(
`Expected size to be an integer greater than 0 but found ${size}`,
);
}
if (array.length === 0) {
return [];
}
const ret = Array.from<T[]>({ length: Math.ceil(array.length / size) });
let readIndex = 0;
let writeIndex = 0;
while (readIndex < array.length) {
ret[writeIndex] = array.slice(readIndex, readIndex + size);
writeIndex += 1;
readIndex += size;
}
return ret;
}
================================================
FILE: src/lib/utils/debounce.ts
================================================
// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.
// This module is browser compatible.
/**
* A debounced function that will be delayed by a given `wait`
* time in milliseconds. If the method is called again before
* the timeout expires, the previous call will be aborted.
*/
export interface DebouncedFunction<T extends Array<unknown>> {
(...args: T): void;
/** Clears the debounce timeout and omits calling the debounced function. */
clear(): void;
/** Clears the debounce timeout and calls the debounced function immediately. */
flush(): void;
/** Returns a boolean whether a debounce call is pending or not. */
readonly pending: boolean;
}
/**
* Creates a debounced function that delays the given `func`
* by a given `wait` time in milliseconds. If the method is called
* again before the timeout expires, the previous call will be
* aborted.
*
* @example
* ```
* import { debounce } from "https://deno.land/std@$STD_VERSION/async/debounce.ts";
*
* const log = debounce(
* (event: Deno.FsEvent) =>
* console.log("[%s] %s", event.kind, event.paths[0]),
* 200,
* );
*
* for await (const event of Deno.watchFs("./")) {
* log(event);
* }
* // wait 200ms ...
* // output: Function debounced after 200ms with baz
* ```
*
* @param fn The function to debounce.
* @param wait The time in milliseconds to delay the function.
*/
// deno-lint-ignore no-explicit-any
export function debounce<T extends Array<any>>(
fn: (this: DebouncedFunction<T>, ...args: T) => void,
wait: number,
): DebouncedFunction<T> {
let timeout: number | null = null;
let flush: (() => void) | null = null;
const debounced: DebouncedFunction<T> = ((...args: T) => {
debounced.clear();
flush = () => {
debounced.clear();
fn.call(debounced, ...args);
};
// @ts-ignore
timeout = setTimeout(flush, wait);
}) as DebouncedFunction<T>;
debounced.clear = () => {
if (typeof timeout === "number") {
clearTimeout(timeout);
timeout = null;
flush = null;
}
};
debounced.flush = () => {
flush?.();
};
Object.defineProperty(debounced, "pending", {
get: () => typeof timeout === "number",
});
return debounced;
}
================================================
FILE: src/lib/utils/diff.ts
================================================
/**
* Returns the difference between two arrays (unique elements in array1 that are not present in array2).
*
* @template T - The type of the elements in the input arrays.
* @param {T[]} arr1 - The first input array.
* @param {T[]} arr2 - The second input array.
* @returns {T[]} - An array containing the unique elements of array1 not present in array2.
*/
export function diff<T>(arr1: readonly T[], arr2: readonly T[]): T[] {
const a = new Set(arr1);
const b = new Set(arr2);
return Array.from([...a].filter(x => !b.has(x)));
}
================================================
FILE: src/lib/utils/url.ts
================================================
export const ERROR_RESPONSE_BODY_READER = new Error(
"failed to get response body reader"
);
export const ERROR_INCOMPLETED_DOWNLOAD = new Error(
"failed to complete download"
);
export const HeaderContentLength = "Content-Length";
export interface DownloadProgressEvent {
url: string | URL;
total: number;
received: number;
delta: number;
done: boolean;
}
export type ProgressCallback = (event: DownloadProgressEvent) => void;
export function tryURL(value: string) {
try {
new URL(value);
return true;
} catch (e) { }
return false;
}
/**
* Download content of a URL with progress.
*
* Progress only works when Content-Length is provided by the server.
*
*/
export const downloadWithProgress = async (
url: string | URL,
cb?: ProgressCallback
): Promise<ArrayBuffer> => {
const resp = await fetch(url);
let buf;
try {
// Set total to -1 to indicate that there is not Content-Type Header.
const total = parseInt(resp.headers.get(HeaderContentLength) || "-1");
const reader = resp.body?.getReader();
if (!reader) throw ERROR_RESPONSE_BODY_READER;
const chunks = [];
let received = 0;
for (; ;) {
const { done, value } = await reader.read();
const delta = value ? value.length : 0;
if (done) {
if (total != -1 && total !== received) throw ERROR_INCOMPLETED_DOWNLOAD;
cb && cb({ url, total, received, delta, done });
break;
}
chunks.push(value);
received += delta;
cb && cb({ url, total, received, delta, done });
}
const data = new Uint8Array(received);
let position = 0;
for (const chunk of chunks) {
data.set(chunk, position);
position += chunk.length;
}
buf = data.buffer;
} catch (e) {
console.log(`failed to send download progress event: `, e);
// Fetch arrayBuffer directly when it is not possible to get progress.
buf = await resp.arrayBuffer();
cb &&
cb({
url,
total: buf.byteLength,
received: buf.byteLength,
delta: 0,
done: true,
});
}
return buf;
};
/**
* toBlobURL fetches data from an URL and return a blob URL.
*
* Example:
*
* ```ts
* await toBlobURL("http://localhost:3000/ffmpeg.js", "text/javascript");
* ```
*/
export const toBlobURL = async (
url: string,
mimeType: string,
progress = false,
cb?: ProgressCallback
): Promise<string> => {
const buf = progress
? await downloadWithProgress(url, cb)
: await (await fetch(url)).arrayBuffer();
const blob = new Blob([buf], { type: mimeType });
return URL.createObjectURL(blob);
};
/**
* Converts file content to a Base64-encoded data URL.
*
* This function takes the content of a file as a string and its MIME type,
* then returns a data URL that represents the encoded content. Data URLs
* can be used to embed the content directly into web documents or stylesheets.
*
* @param content - The content of the file as a string.
* @param mimeType - The MIME type of the file, e.g., "image/png".
* @returns The Base64-encoded data URL.
*
* @example
* const imageUrl = toDataUrl('<image-binary-data>', 'image/png');
* console.log(imageUrl); // data:image/png;base64,<Base64-encoded-data>
*/
export function toDataUrl(content: string, mimeType: string): string {
// Encode the file content to Base64. We use btoa function which encodes
// a string in base-64. This function is universally supported in JavaScript
// environments, including Deno. It's important to ensure that the content
// is properly encoded to avoid issues with binary data or special characters.
const base64Content = btoa(content);
// Construct the data URL by concatenating the parts together.
// The format follows: "data:[<MIME-type>];base64,[<data>]"
const dataUrl = `data:${mimeType};base64,${base64Content}`;
return dataUrl;
}
================================================
FILE: src/lib/vendor/core.ts
================================================
// @ts-ignore
// import FFmpegCore from "../../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.js";
import FFmpegCore from "@ffmpeg/core-mt";
export { FFmpegCore }
================================================
FILE: src/lib/vendor/worker.ts
================================================
// @ts-ignore
import "../../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.worker.js";
// import FFmpegWorker from "../../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.worker.js";
// export { FFmpegWorker }
================================================
FILE: src/pages/api/twitter/index.ts
================================================
import type { APIContext } from "astro";
import type { Tweet } from "../../../types/index";
import { extractAndFormatMedia, fetchEmbeddedTweet } from "../../../lib/get-tweet";
export const prerender = false;
export async function GET({ url }: APIContext) {
try {
const _url = url?.searchParams?.get?.('url') ?? url?.searchParams?.get?.('q') ?? '';
console.log({ _url })
const tweet: Tweet = await fetchEmbeddedTweet(_url);
const media = extractAndFormatMedia(tweet);
return new Response(JSON.stringify(media), {
status: 200,
headers: {
"Content-Type": "application/json",
'Cache-Control': 'public, max-age=604800'
}
});
} catch (e) {
return new Response(JSON.stringify({ error: (e as Error).toString() }), {
status: 400
})
}
}
================================================
FILE: src/pages/ffmpeg.astro
================================================
---
import Layout from '../layouts/Layout.astro';
import FFmpegEditor from '../components/ffmpeg.svelte';
import ffmpegURL from "@ffmpeg.wasm/main/dist/ffmpeg.min.js?url";
import { Button, TextBlock, InfoBar } from 'fluent-svelte';
import Logo from "~icons/local/logo";
import ProductHuntLogo from "~icons/local/product-hunt-logo";
import FileIconsFfmpeg from '~icons/file-icons/ffmpeg';
import MdiGithub from '~icons/mdi/github';
import MdiTwitter from '~icons/mdi/twitter';
Astro.response.headers.set("Cross-Origin-Opener-Policy", "same-origin");
Astro.response.headers.set("Cross-Origin-Embedder-Policy", "require-corp");
export const prerender = false;
---
<Layout title="FFmpeg Playground - in this tweet?" description="Using ffmpeg to convert between media types, e.g. convert a video from m3u8 to mp4, mp4 to avi, avi to gif, etc... Use it in conjunction with inthisweet.app for even better combinations">
<section class="social-media">
<menu class="flex justify-center gap-1 sm:gap-4">
<Button href="/" variant="standard" rel="noopener" aria-label="Go home">
<span class="flex flex-row items-center gap-2">
<Logo class="logo" /><span class="lt-sm:hidden font-[family:Inter]">In this tweet</span>
</span>
</Button>
<div class="flex-grow" />
<Button class="flex gap-2" variant="hyperlink" href="/ffmpeg">
<FileIconsFfmpeg /> FFmpeg
</Button>
<Button class="flex gap-2" variant="hyperlink" href="https://github.com/okikio/inthistweet" rel="noopener">
<MdiGithub /> GitHub
</Button>
<Button class="flex gap-2" variant="hyperlink" href="https://twitter.com/@inthistweet_dev" rel="noopener">
<MdiTwitter /> Twitter
</Button>
</menu>
</section>
<header class="pt-8 py-4 sm:py-8 md:pt-14 text-center">
<div class="title">
<TextBlock variant="display">
<span class="inline-flex items-center gap-6 title-display" id="title-display">
FFmpeg Playground
<Logo class="logo" />
</span>
</TextBlock>
</div>
<div class="text-gray-900/60 dark:text-gray-200/80 max-w-[48ch] lg:max-w-[60ch] xl:max-w-[75ch] mx-auto">
<TextBlock variant="body">
<span class="leading-7">
Enter a video or image URL, enter your ffmpeg config, click search, and enjoy. You can also open files by clicking the folder button.
</span>
</TextBlock>
</div>
</header>
<main>
<FFmpegEditor value={new URL(Astro.url).searchParams.get('q') ?? ''} client:load />
</main>
<div>
<a href="https://www.producthunt.com/posts/ffmpeg-playground-in-this-tweet?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-ffmpeg-playground-in-this-tweet" target="_blank" rel="noopener">
<img
src="/product-hunt-badge-light.svg"
alt="Upvote on ProductHunt"
width="150"
height="32"
class="text-center mx-auto block dark:hidden"
loading="lazy"
>
<img
src="/product-hunt-badge-dark.svg"
alt="Upvote on ProductHunt"
width="150"
height="32"
class="text-center mx-auto hidden dark:block"
loading="lazy"
>
<!-- <img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=373878&theme=neutral"
alt="in this tweet - ✨ Futuristic ✨ twitter video, gif and image downloader. | Product Hunt"
style="width: 250px; height: 54px;"
width="250"
height="54"
class="text-center mx-auto block dark:hidden"
loading="lazy"
crossorigin="anonymous"
/>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=373878&theme=dark"
alt="in this tweet - ✨ Futuristic ✨ twitter video, gif and image downloader. | Product Hunt"
style="width: 250px; height: 54px;"
width="250"
height="54"
class="text-center mx-auto hidden dark:block"
loading="lazy"
crossorigin="anonymous"
/> -->
</a>
</div>
<footer class="copyright py-4 sm:py-8">
<div class="flex flex-row flex-wrap gap-x-8 gap-y-4 justify-center">
<div>
<span> © {new Date().getFullYear()} </span>
<a class="copyright-link" href="https://okikio.dev" rel="noopener">Okiki Ojo</a>
</div>
</div>
</footer>
<script src={ffmpegURL} is:inline></script>
<!-- <script>
import Measure from "../scripts/measure";
Measure(window);
</script> -->
</Layout>
<style lang="scss">
.social-media,
header,
footer,
main {
margin: auto;
padding: 0.75rem;
@apply max-w-[60ch] md:max-w-[75ch] xl:max-w-[80ch];
}
.logo-short {
height: 1em;
}
.logo :global(path) {
@apply stroke-black;
@apply dark:stroke-white;
}
@sm {
.social-media,
header,
footer,
main {
padding: 1.5rem;
}
}
:global(.title #title-display) {
@apply pb-4;
@apply lt-xxsm:text-2xl text-4xl sm:text-6xl;
}
:global(.icon-button svg.logo) {
inline-size: auto;
flex-shrink: 0;
}
.copyright {
text-align: center;
}
:global(.link),
.copyright-link,
.credit-link {
color: var(--fds-accent-default);
display: inline-flex;
align-items: center;
@apply gap-1;
}
.copyright-link:hover,
.credit-link:hover {
text-decoration: underline;
}
</style>
================================================
FILE: src/pages/index.astro
================================================
---
import type { APIContext } from 'astro';
import Layout from '../layouts/Layout.astro';
import Search from '../components/search.svelte';
import { Button, TextBlock, InfoBar } from 'fluent-svelte';
import Logo from "~icons/local/logo";
import ProductHuntLogo from "~icons/local/product-hunt-logo";
import FileIconsFfmpeg from '~icons/file-icons/ffmpeg';
import MdiGithub from '~icons/mdi/github';
import MdiTwitter from '~icons/mdi/twitter';
Astro.response.headers.set("Cross-Origin-Opener-Policy", "unsafe-none");
Astro.response.headers.set("Cross-Origin-Embedder-Policy", "unsafe-none");
const url = Astro.url;
const _url = url?.searchParams?.get?.('url') ?? url?.searchParams?.get?.('q') ?? '';
export const prerender = true;
---
<Layout title="Video, gif and image downloader for twitter - in this tweet?" description="✨ Futuristic ✨ twitter video, gif and image downloader. Enter a Tweet URL, click search and download the resulting videos, gifs, and images to share, create a meme, and/or to store." preload>
<section class="social-media">
<menu class="flex justify-center gap-1 sm:gap-4">
<Button href="/" variant="standard" rel="noopener" aria-label="Go home">
<span class="flex flex-row items-center gap-2">
<Logo class="logo" /><span class="lt-sm:hidden font-[family:Inter]">In this tweet</span>
</span>
</Button>
<div class="flex-grow" />
<Button class="flex gap-2" variant="hyperlink" href="/ffmpeg">
<FileIconsFfmpeg /> FFmpeg
</Button>
<Button class="flex gap-2" variant="hyperlink" href="https://github.com/okikio/inthistweet" rel="noopener">
<MdiGithub /> GitHub
</Button>
<Button class="flex gap-2" variant="hyperlink" href="https://twitter.com/@inthistweet_dev" rel="noopener">
<MdiTwitter /> Twitter
</Button>
</menu>
</section>
<header class="pt-8 py-4 sm:py-8 md:pt-14 text-center">
<div class="title">
<TextBlock variant="display">
<span class="inline-flex items-center gap-6 title-display" id="title-display">
In this tweet
<Logo class="logo" />
</span>
</TextBlock>
</div>
<div class="text-gray-900/60 dark:text-gray-200/80 max-w-[48ch] lg:max-w-[60ch] xl:max-w-[75ch] mx-auto">
<TextBlock variant="body">
<span class="leading-7">
Enter a Tweet URL, click search, and download the videos, gifs and images.
</span>
</TextBlock>
</div>
</header>
<main>
<Search value={_url} client:load />
</main>
<div>
<a href="https://www.producthunt.com/posts/in-this-tweet?utm_source=badge-featured&utm_medium=badge&utm_souce=badge-in-this-tweet" target="_blank" rel="noopener">
<img
src="/product-hunt-badge-light.svg"
alt="Upvote on ProductHunt"
width="150"
height="32"
class="text-center mx-auto block dark:hidden"
loading="lazy"
>
<img
src="/product-hunt-badge-dark.svg"
alt="Upvote on ProductHunt"
width="150"
height="32"
class="text-center mx-auto hidden dark:block"
loading="lazy"
>
<!-- <img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=373878&theme=neutral"
alt="in this tweet - ✨ Futuristic ✨ twitter video, gif and image downloader. | Product Hunt"
style="width: 250px; height: 54px;"
width="250"
height="54"
class="text-center mx-auto block dark:hidden"
loading="lazy"
crossorigin="anonymous"
/>
<img
src="https://api.producthunt.com/widgets/embed-image/v1/featured.svg?post_id=373878&theme=dark"
alt="in this tweet - ✨ Futuristic ✨ twitter video, gif and image downloader. | Product Hunt"
style="width: 250px; height: 54px;"
width="250"
height="54"
class="text-center mx-auto hidden dark:block"
loading="lazy"
crossorigin="anonymous"
/> -->
</a>
</div>
<footer class="copyright py-4 sm:py-8">
<div class="flex flex-row flex-wrap gap-x-8 gap-y-4 justify-center">
<div class="inline-flex gap-1">
<span> © {new Date().getFullYear()} </span>
<a class="copyright-link" href="https://okikio.dev" rel="noopener">Okiki Ojo</a>
</div>
<div>
<span>Inspired by </span>
<a class="credit-link" href="https://github.com/egoist/download-twitter-video" rel="noopener">egoist</a>
</div>
</div>
</footer>
<!-- <script>
import Measure from "../scripts/measure";
Measure(window);
</script> -->
</Layout>
<style lang="scss">
.social-media,
header,
footer,
main {
margin: auto;
padding: 0.75rem;
@apply max-w-[60ch] md:max-w-[75ch] xl:max-w-[80ch];
}
.logo-short {
height: 1em;
}
.logo :global(path) {
@apply stroke-black;
@apply dark:stroke-white;
}
@sm {
.social-media,
header,
footer,
main {
padding: 1.5rem;
}
}
:global(.title #title-display) {
@apply pb-4;
@apply lt-sm:text-4xl lt-md:text-6xl;
}
:global(.icon-button svg.logo) {
inline-size: auto;
flex-shrink: 0;
}
.copyright {
text-align: center;
}
:global(.link),
.copyright-link,
.credit-link {
color: var(--fds-accent-default);
display: inline-flex;
align-items: center;
@apply gap-1;
}
.copyright-link:hover,
.credit-link:hover {
text-decoration: underline;
}
</style>
================================================
FILE: src/scripts/measure.ts
================================================
export const hook = (_this, method, callback: (...args: unknown[]) => unknown) => {
const orig = _this[method];
return (...args) => {
callback(...args);
return orig.apply(_this, args);
};
};
export const doNotTrack = () => {
const { doNotTrack, navigator, external } = globalThis as typeof globalThis & { doNotTrack: boolean };
const msTrackProtection = "msTrackingProtectionEnabled";
const msTracking = () => {
return external && msTrackProtection in external && external[msTrackProtection]();
};
const dnt = doNotTrack || navigator.doNotTrack || msTracking();
return dnt == "1" || dnt === "yes";
};
export function removeTrailingSlash(url) {
return url && url.length > 1 && url.endsWith("/") ? url.slice(0, -1) : url;
}
export default function (window: Window & typeof globalThis) {
try {
const apiRoute = "/take-measurement"; // "/api/collect";
const {
screen: { width, height },
navigator: { language },
location: { hostname, pathname, search },
localStorage,
document,
history,
} = window;
// const script = document.querySelector('script[data-website-id]') as HTMLScriptElement;
// if (!script) return;
// const attr = script.getAttribute.bind(script);
const attr = (id: string) => {
return ({
"data-host-url": "https://inthistweet.app",
"data-domains": "inthistweet.app,media.okikio.dev,okikio.dev,bundlejs.com,bundle.js.org,bundlesize.com",
"data-website-id": "72683bf5-0839-42eb-84e4-5d34f619a31c"
})[id];
};
const website = attr("data-website-id");
const hostUrl = attr("data-host-url");
const autoTrack = attr("data-auto-track") !== "false";
const dnt = attr("data-do-not-track");
const cssEvents = attr("data-css-events") !== "false";
const domain = attr("data-domains") || "";
const domains = domain.split(",").map(n => n.trim());
const eventClass = /^umami--([a-z]+)--([\w]+[\w-]*)$/;
const eventSelect = "[class*='umami--']";
const trackingDisabled = () =>
(localStorage && localStorage.getItem("umami.disabled")) ||
(dnt && doNotTrack()) ||
(domain && !domains.includes(hostname));
const root = hostUrl
? removeTrailingSlash(hostUrl)
: ""; // script.src.split('/').slice(0, -1).join('/');
const screen = `${width}x${height}`;
const listeners = {};
let currentUrl = `${pathname}${search}`;
let currentRef = document.referrer;
let cache;
/* Collect metrics */
const post = (url, data, callback) => {
const req = new XMLHttpRequest();
req.open("POST", url, true);
req.setRequestHeader("Content-Type", "application/json");
if (cache) req.setRequestHeader("x-umami-cache", cache);
req.onreadystatechange = () => {
if (req.readyState === 4) {
callback(req.response);
}
};
req.send(JSON.stringify(data));
};
const getPayload = () => ({
website,
hostname,
screen,
language,
url: currentUrl,
});
const assign = (a, b) => {
Object.keys(b).forEach(key => {
a[key] = b[key];
});
return a;
};
const collect = (type, payload) => {
if (trackingDisabled()) return;
post(
`${root}${apiRoute}`,
{
type,
payload,
},
res => (cache = res),
);
};
const trackView = (url = currentUrl, referrer = currentRef, uuid = website) => {
collect(
"pageview",
assign(getPayload(), {
website: uuid,
url,
referrer,
}),
);
};
const trackEvent = (event_value, event_type = "custom", url = currentUrl, uuid = website) => {
collect(
"event",
assign(getPayload(), {
website: uuid,
url,
event_type,
event_value,
}),
);
};
/* Handle events */
const sendEvent = (value, type) => {
const payload = getPayload();
const data = JSON.stringify({
type: "event",
payload: {
...payload,
event_type: type,
event_value: value
},
});
navigator.sendBeacon(`${root}${apiRoute}`, data);
};
const addEvents = node => {
const elements = node.querySelectorAll(eventSelect);
Array.prototype.forEach.call(elements, addEvent);
};
const addEvent = element => {
(element.getAttribute("class") || "").split(" ").forEach(className => {
if (!eventClass.test(className)) return;
const [, type, value] = className.split("--");
const listener = listeners[className]
? listeners[className]
: (listeners[className] = () => {
if (element.tagName === "A") {
sendEvent(value, type);
} else {
trackEvent(value, type);
}
});
element.addEventListener(type, listener, true);
});
};
/* Handle history changes */
const handlePush = (state, title, url) => {
if (!url) return;
currentRef = currentUrl;
const newUrl = url.toString();
if (newUrl.substring(0, 4) === "http") {
currentUrl = "/" + newUrl.split("/").splice(3).join("/");
} else {
currentUrl = newUrl;
}
if (currentUrl !== currentRef) {
trackView();
}
};
const observeDocument = () => {
const monitorMutate = mutations => {
mutations.forEach(mutation => {
const element = mutation.target;
addEvent(element);
addEvents(element);
});
};
const observer = new MutationObserver(monitorMutate);
observer.observe(document, { childList: true, subtree: true });
};
/* Global */
if (!(globalThis as typeof globalThis & { umami: object }).umami) {
const umami = eventValue => trackEvent(eventValue);
umami.trackView = trackView;
umami.trackEvent = trackEvent;
(globalThis as typeof globalThis & { umami: object }).umami = umami;
}
/* Start */
if (autoTrack && !trackingDisabled()) {
history.pushState = hook(history, "pushState", handlePush);
history.replaceState = hook(history, "replaceState", handlePush);
const update = () => {
if (document.readyState === "complete") {
trackView();
if (cssEvents) {
addEvents(document);
observeDocument();
}
}
};
document.addEventListener("readystatechange", update, true);
update();
}
} catch (e) {
console.warn(e)
}
};
================================================
FILE: src/types/card.ts
================================================
import type { ImageColorValue, MediaDetails } from "./media.ts";
export interface TwitterCard {
card_platform?: CardPlatform;
name: string;
url: string;
binding_values: BindingValues;
}
export interface CardPlatform {
platform: {
audience: { name: string };
device: { name: string; version: string };
};
}
export interface BindingValues {
unified_card?: UnifiedCard;
[key: string]: BindingValue | undefined;
}
export interface BindingValue {
string_value?: string;
image_value?: ImageValue;
image_color_value?: ImageColorValue;
type: "IMAGE" | "STRING" | (string & {});
scribe_key?: string;
user_value?: UserValue;
}
export interface UnifiedCard extends BindingValue {
string_value?: string;
type: "STRING"
}
export interface ImageValue {
height: number;
width: number;
url: string;
}
export interface UserValue {
id_str: string;
path: any[];
}
// Represents the main structure of the unified_card data
export interface UnifiedCardData {
layout?: LayoutData;
type?: string; // Example: "mixed_media_multi_dest_carousel_website"
component_objects?: ComponentObjects;
destination_objects: DestinationObjects;
media_entities?: MediaEntities;
}
// Layout data structure
export interface LayoutData {
type: string; // Example: "swipeable"
data: LayoutDataDetails;
}
// Specific details within the layout data
export interface LayoutDataDetails {
slides: Array<Array<string>>; // Array of arrays containing component keys
}
// Component objects within the unified_card
export interface ComponentObjects {
[key: string]: ComponentObject;
}
// Individual component object (e.g., media, details)
export interface ComponentObject {
type: string; // Example: "media" or "details"
data: ComponentData;
}
// Data for each component object
export interface ComponentData {
// This structure will vary based on the type of the component
// For media: { id: string, destination: string }
// For details: { title: { content: string, is_rtl: boolean }, ... }
[key: string]: any;
}
// Destination objects referenced in components
export interface DestinationObjects {
[key: string]: DestinationObject;
}
// Individual destination object
export interface DestinationObject {
type: string; // Example: "browser"
data: DestinationData;
}
// Data for each destination object
export interface DestinationData {
url_data: {
url: string;
vanity: string;
};
media_id?: string; // Present in case of browser_with_docked_media type
}
// Media entities mapping media IDs to media details
export interface MediaEntities {
[key: string]: CardMediaEntity;
}
// Represents a media entity
export interface CardMediaEntity {
id: number;
id_str: string;
media_url_https: string;
type: "photo" | "video" | (string & {}); // Example: "photo" or "video"
original_info: {
width: number;
height: number;
focus_rects: Array<FocusRect>;
};
sizes: MediaSizes;
}
// Focus rectangles for media
export interface FocusRect {
x: number;
y: number;
w: number;
h: number;
}
// Different size variants of media
export interface MediaSizes {
small: MediaSize;
medium: MediaSize;
large: MediaSize;
thumb: MediaSize;
}
// Represents a single media size
export interface MediaSize {
w: number;
h: number;
resize: string; // Example: "fit" or "crop"
}
================================================
FILE: src/types/edit.ts
================================================
export interface TweetEditControl {
edit_tweet_ids: string[]
editable_until_msecs: string
is_edit_eligible: boolean
edits_remaining: string
}
================================================
FILE: src/types/entities.ts
================================================
export type Indices = [number, number]
export interface HashtagEntity {
indices: Indices
text: string
}
export interface UserMentionEntity {
id_str: string
indices: Indices
name: string
screen_name: string
}
export interface MediaEntity {
display_url: string
expanded_url: string
gitextract_igadfnhp/ ├── .gitignore ├── .gitpod.yml ├── .vscode/ │ ├── extensions.json │ └── launch.json ├── LICENSE ├── README.md ├── astro.config.ts ├── package.json ├── public/ │ ├── _headers │ ├── _redirects │ ├── favicon/ │ │ └── browserconfig.xml │ ├── manifest.json │ ├── netlify.toml │ ├── open-search.xml │ └── robots.txt ├── range-requests.mjs ├── repl.ts ├── src/ │ ├── components/ │ │ ├── custom-toast.svelte │ │ ├── ffmpeg.svelte │ │ ├── ffmpeg.ts │ │ ├── register-sw.svelte │ │ ├── search.svelte │ │ ├── service-worker.ts │ │ └── transition.ts │ ├── env.d.ts │ ├── layouts/ │ │ └── Layout.astro │ ├── lib/ │ │ ├── codemirror.ts │ │ ├── ffmpeg.ts │ │ ├── get-tweet.ts │ │ ├── height.ts │ │ ├── m3u8/ │ │ │ ├── mod.ts │ │ │ ├── parser.ts │ │ │ ├── traverse.ts │ │ │ ├── types.ts │ │ │ └── urls.ts │ │ ├── path/ │ │ │ └── mod.ts │ │ ├── search.ts │ │ ├── shell-lang.ts │ │ ├── state.ts │ │ ├── transcode.ts │ │ ├── utils/ │ │ │ ├── chunk.ts │ │ │ ├── debounce.ts │ │ │ ├── diff.ts │ │ │ └── url.ts │ │ └── vendor/ │ │ ├── core.ts │ │ └── worker.ts │ ├── pages/ │ │ ├── api/ │ │ │ └── twitter/ │ │ │ └── index.ts │ │ ├── ffmpeg.astro │ │ └── index.astro │ ├── scripts/ │ │ └── measure.ts │ └── types/ │ ├── card.ts │ ├── edit.ts │ ├── entities.ts │ ├── index.ts │ ├── media.ts │ ├── photo.ts │ ├── tweet.ts │ ├── user.ts │ └── video.ts ├── tailwind.config.ts ├── tsconfig.json └── vercel.json
SYMBOL INDEX (148 symbols across 32 files)
FILE: range-requests.mjs
function parseRangeHeader (line 185) | function parseRangeHeader(rangeHeader) {
function calculateEffectiveBoundaries (line 237) | function calculateEffectiveBoundaries(blob, start, end) {
function createPartialResponse (line 291) | async function createPartialResponse(request, originalResponse) {
class RangeRequestsPlugin (line 348) | class RangeRequestsPlugin {
function urlPattern (line 376) | function urlPattern({ request }) {
FILE: src/components/ffmpeg.ts
function fetchFile (line 43) | async function fetchFile(data: string | ArrayBuffer | Blob | File, opts?...
function chunk (line 105) | function chunk<T>(array: readonly T[], size: number): T[][] {
function diff (line 138) | function diff<T>(arr1: readonly T[], arr2: readonly T[]): T[] {
function define (line 146) | function define(style: string, dict: string | any[]) {
function tokenBase (line 166) | function tokenBase(stream: { eatSpace: () => any; sol: () => any; next: ...
function tokenString (line 220) | function tokenString(quote: string, style: string) {
function tokenStringStart (line 247) | function tokenStringStart(quote: any, style: string) {
function tokenHeredoc (line 267) | function tokenHeredoc(delim: any) {
function tokenize (line 275) | function tokenize(stream: any, state: { tokens: any[]; }) {
type DebouncedFunction (line 300) | interface DebouncedFunction<T extends Array<unknown>> {
function debounce (line 337) | function debounce<T extends Array<any>>(
FILE: src/components/service-worker.ts
type RegisterSWOptions (line 7) | interface RegisterSWOptions {
function registerSW (line 25) | function registerSW(options: RegisterSWOptions = {}) {
function createServiceWorker (line 106) | function createServiceWorker(options: RegisterSWOptions = {}) {
FILE: src/components/transition.ts
function blur (line 3) | function blur(node, { delay = 0, duration = 400, easing = cubicInOut, am...
FILE: src/lib/codemirror.ts
function createCodeMirror (line 6) | function createCodeMirror(editorState: EditorStateConfig, parentEl?: HTM...
FILE: src/lib/ffmpeg.ts
type FFmpegLoadParams (line 21) | type FFmpegLoadParams = Parameters<(typeof FFmpeg)['prototype']['load']>;
type FFMessageLoadConfig (line 22) | type FFMessageLoadConfig = FFmpegLoadParams[0];
type FFMessageOptions (line 23) | type FFMessageOptions = FFmpegLoadParams[1];
function createFFmpeg (line 44) | async function createFFmpeg (config?: FFMessageLoadConfig, opts?: FFMess...
function fetchFile (line 92) | async function fetchFile(data: string | ArrayBuffer | Blob | File, opts?...
FILE: src/lib/get-tweet.ts
constant EMBED_API_URL (line 6) | const EMBED_API_URL = "https://cdn.syndication.twimg.com";
class TwitterApiError (line 12) | class TwitterApiError extends Error {
method constructor (line 16) | constructor({
type MediaItem (line 35) | interface MediaItem {
type MediaVariant (line 46) | interface MediaVariant {
function approximateResolution (line 61) | function approximateResolution(bitrate: number): string {
function extractAndFormatMedia (line 237) | function extractAndFormatMedia(tweet: Tweet | TweetParent | QuotedTweet)...
function fetchEmbeddedTweet (line 295) | async function fetchEmbeddedTweet(url: string) {
FILE: src/lib/height.ts
function syncHeight (line 3) | function syncHeight(el: HTMLElement, initial = 0) {
FILE: src/lib/m3u8/mod.ts
type Manifest (line 21) | interface Manifest {
FILE: src/lib/m3u8/parser.ts
class M3U8Parser (line 12) | class M3U8Parser {
method constructor (line 20) | constructor({ playlist, url }: { playlist?: string; url?: string }) {
method parse (line 31) | private parse(raw: string): void {
method mergeRaw (line 90) | private mergeRaw(item: PlaylistItem, line: ParsedLine | string) {
method parseLine (line 98) | parseLine(line: string, index: number): ParsedLine {
method parseHeader (line 105) | parseHeader(line: string) {
method handleEXTGRP (line 121) | private handleEXTGRP(line: string, index: number) {
method handleEXTVLCOPT (line 140) | private handleEXTVLCOPT(line: string, index: number) {
method handleEXTINF (line 159) | private handleEXTINF(line: ParsedLine): PlaylistItem {
method getAttribute (line 188) | private getAttribute(name: Attributes, line: string) {
method getName (line 195) | private getName(line: string) {
method getOption (line 201) | private getOption(line: string, name: Options) {
method getValue (line 209) | private getValue(line: string) {
method getUrl (line 218) | private getUrl(line: string) {
method getParameter (line 222) | private getParameter(line: string, name: Parameters) {
method getPlaylist (line 230) | public getPlaylist(): Playlist {
method getPlaylistByGroup (line 238) | public getPlaylistByGroup(group: string): Playlist {
method getPlaylistItems (line 256) | private getPlaylistItems(group: string): PlaylistItem[] {
method getPlaylistsByGroups (line 262) | public getPlaylistsByGroups(groups: string[]): Playlist {
method playlistGroups (line 289) | public get playlistGroups() {
method write (line 293) | public write(): string {
method updateItems (line 301) | public updateItems(items: Map<number, PlaylistItem>) {
method updatePlaylist (line 305) | public updatePlaylist(playlist: Playlist) {
method fetchPlaylist (line 319) | public async fetchPlaylist({ url }: { url: string }) {
method filterPlaylist (line 330) | public filterPlaylist(
FILE: src/lib/m3u8/traverse.ts
function parseManifest (line 19) | function parseManifest(arrbuf: ArrayBuffer) {
function traverseM3U8Manifests (line 41) | async function traverseM3U8Manifests(arrbuf: ArrayBuffer, baseUrl: URL, ...
FILE: src/lib/m3u8/types.ts
type PlaylistHeader (line 3) | interface PlaylistHeader {
type PlaylistItemTvg (line 18) | type PlaylistItemTvg = z.infer<typeof PlaylistItemTvgValidator>;
type PlaylistItem (line 41) | type PlaylistItem = z.infer<typeof PlaylistItemValidator>;
type Playlist (line 43) | interface Playlist {
type ParsedLine (line 49) | type ParsedLine = {
type Attributes (line 54) | enum Attributes {
type Options (line 70) | enum Options {
type Parameters (line 75) | enum Parameters {
FILE: src/lib/m3u8/urls.ts
function urlToFilePath (line 11) | function urlToFilePath(urlStr: string): string {
FILE: src/lib/path/mod.ts
constant CHAR_DOT (line 5) | const CHAR_DOT = 46;
constant CHAR_FORWARD_SLASH (line 6) | const CHAR_FORWARD_SLASH = 47;
function isPosixPathSeparator (line 10) | function isPosixPathSeparator(code: number): boolean {
function assertPath (line 14) | function assertPath(path: string) {
function extname (line 27) | function extname(path: string): string {
FILE: src/lib/search.ts
function onSearch (line 14) | async function onSearch(e?: Event, ffmpeg?: FFmpeg, value?: string, cons...
FILE: src/lib/shell-lang.ts
function define (line 4) | function define(style: string, dict: string | any[]) {
function tokenBase (line 24) | function tokenBase(stream: { eatSpace: () => any; sol: () => any; next: ...
function tokenString (line 78) | function tokenString(quote: string, style: string) {
function tokenStringStart (line 105) | function tokenStringStart(quote: any, style: string) {
function tokenHeredoc (line 125) | function tokenHeredoc(delim: any) {
function tokenize (line 133) | function tokenize(stream: any, state: { tokens: any[]; }) {
FILE: src/lib/state.ts
type FFmpegConfig (line 3) | interface FFmpegConfig {
constant EMPTY_CONSOLE_TEXT (line 316) | const EMPTY_CONSOLE_TEXT = "No Logs...";
constant FFMPEG_DEFAULT_OPTS (line 317) | const FFMPEG_DEFAULT_OPTS: FFmpegConfig = {
FILE: src/lib/transcode.ts
function transcode (line 9) | async function transcode({ target }: Event & { currentTarget: EventTarge...
function getMediaType (line 82) | function getMediaType(mediaType: string) {
FILE: src/lib/utils/chunk.ts
function chunk (line 33) | function chunk<T>(array: readonly T[], size: number): T[][] {
FILE: src/lib/utils/debounce.ts
type DebouncedFunction (line 9) | interface DebouncedFunction<T extends Array<unknown>> {
function debounce (line 46) | function debounce<T extends Array<any>>(
FILE: src/lib/utils/diff.ts
function diff (line 9) | function diff<T>(arr1: readonly T[], arr2: readonly T[]): T[] {
FILE: src/lib/utils/url.ts
constant ERROR_RESPONSE_BODY_READER (line 1) | const ERROR_RESPONSE_BODY_READER = new Error(
constant ERROR_INCOMPLETED_DOWNLOAD (line 4) | const ERROR_INCOMPLETED_DOWNLOAD = new Error(
type DownloadProgressEvent (line 9) | interface DownloadProgressEvent {
type ProgressCallback (line 17) | type ProgressCallback = (event: DownloadProgressEvent) => void;
function tryURL (line 19) | function tryURL(value: string) {
function toDataUrl (line 126) | function toDataUrl(content: string, mimeType: string): string {
FILE: src/pages/api/twitter/index.ts
function GET (line 6) | async function GET({ url }: APIContext) {
FILE: src/scripts/measure.ts
function removeTrailingSlash (line 24) | function removeTrailingSlash(url) {
FILE: src/types/card.ts
type TwitterCard (line 3) | interface TwitterCard {
type CardPlatform (line 10) | interface CardPlatform {
type BindingValues (line 17) | interface BindingValues {
type BindingValue (line 22) | interface BindingValue {
type UnifiedCard (line 31) | interface UnifiedCard extends BindingValue {
type ImageValue (line 36) | interface ImageValue {
type UserValue (line 42) | interface UserValue {
type UnifiedCardData (line 48) | interface UnifiedCardData {
type LayoutData (line 57) | interface LayoutData {
type LayoutDataDetails (line 63) | interface LayoutDataDetails {
type ComponentObjects (line 68) | interface ComponentObjects {
type ComponentObject (line 73) | interface ComponentObject {
type ComponentData (line 79) | interface ComponentData {
type DestinationObjects (line 87) | interface DestinationObjects {
type DestinationObject (line 92) | interface DestinationObject {
type DestinationData (line 98) | interface DestinationData {
type MediaEntities (line 107) | interface MediaEntities {
type CardMediaEntity (line 112) | interface CardMediaEntity {
type FocusRect (line 126) | interface FocusRect {
type MediaSizes (line 134) | interface MediaSizes {
type MediaSize (line 142) | interface MediaSize {
FILE: src/types/edit.ts
type TweetEditControl (line 1) | interface TweetEditControl {
FILE: src/types/entities.ts
type Indices (line 1) | type Indices = [number, number]
type HashtagEntity (line 3) | interface HashtagEntity {
type UserMentionEntity (line 8) | interface UserMentionEntity {
type MediaEntity (line 15) | interface MediaEntity {
type UrlEntity (line 22) | interface UrlEntity {
type SymbolEntity (line 29) | interface SymbolEntity {
type TweetEntities (line 34) | interface TweetEntities {
FILE: src/types/media.ts
type RGB (line 3) | type RGB = {
type Rect (line 9) | type Rect = {
type Size (line 16) | type Size = {
type VideoInfo (line 22) | interface VideoInfo {
type ImageColorValue (line 31) | interface ImageColorValue {
type ColorPalette (line 35) | interface ColorPalette {
type MediaBase (line 40) | interface MediaBase {
type MediaPhoto (line 63) | interface MediaPhoto extends MediaBase {
type MediaAnimatedGif (line 68) | interface MediaAnimatedGif extends MediaBase {
type MediaVideo (line 73) | interface MediaVideo extends MediaBase {
type MediaDetails (line 78) | type MediaDetails = MediaPhoto | MediaAnimatedGif | MediaVideo
FILE: src/types/photo.ts
type TweetPhoto (line 3) | interface TweetPhoto {
FILE: src/types/tweet.ts
type TweetBase (line 12) | interface TweetBase {
type Tweet (line 52) | interface Tweet extends TweetBase {
type TweetParent (line 72) | interface TweetParent extends Tweet {
type QuotedTweet (line 81) | interface QuotedTweet extends Tweet {
FILE: src/types/user.ts
type TweetUser (line 1) | interface TweetUser {
FILE: src/types/video.ts
type TweetVideo (line 1) | interface TweetVideo {
Condensed preview — 62 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (217K chars).
[
{
"path": ".gitignore",
"chars": 230,
"preview": "# build output\ndist/\n.output/\n\n# dependencies\nnode_modules/\n\n# logs\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\npnpm-"
},
{
"path": ".gitpod.yml",
"chars": 394,
"preview": "# This configuration file was automatically generated by Gitpod.\n# Please adjust to your needs (see https://www.gitpod.i"
},
{
"path": ".vscode/extensions.json",
"chars": 87,
"preview": "{\n \"recommendations\": [\"astro-build.astro-vscode\"],\n \"unwantedRecommendations\": []\n}\n"
},
{
"path": ".vscode/launch.json",
"chars": 207,
"preview": "{\n \"version\": \"0.2.0\",\n \"configurations\": [\n {\n \"command\": \"./node_modules/.bin/astro dev\",\n \"name\": \"Dev"
},
{
"path": "LICENSE",
"chars": 1066,
"preview": "MIT License\n\nCopyright (c) 2023 Okiki Ojo\n\nPermission is hereby granted, free of charge, to any person obtaining a copy\n"
},
{
"path": "README.md",
"chars": 3141,
"preview": "# inthistweet\n\n[](https://stackblitz.c"
},
{
"path": "astro.config.ts",
"chars": 4517,
"preview": "import { defineConfig } from 'astro/config';\n\n// https://astro.build/config\nimport Icons from 'unplugin-icons/vite';\nimp"
},
{
"path": "package.json",
"chars": 2221,
"preview": "{\n \"name\": \"@example/basics\",\n \"type\": \"module\",\n \"version\": \"0.0.1\",\n \"private\": true,\n \"scripts\": {\n \"dev\": \"a"
},
{
"path": "public/_headers",
"chars": 1381,
"preview": "/*\n X-Frame-Options: SAMEORIGIN\n X-Content-Type-Options: nosniff\n X-XSS-Protection: 1; mode=block\n Referrer-Policy: "
},
{
"path": "public/_redirects",
"chars": 64,
"preview": "/take-measurement https://analytics.bundlejs.com/api/collect 200"
},
{
"path": "public/favicon/browserconfig.xml",
"chars": 254,
"preview": "<?xml version=\"1.0\" encoding=\"utf-8\"?>\n<browserconfig>\n <msapplication>\n <tile>\n <square150x150logo"
},
{
"path": "public/manifest.json",
"chars": 2296,
"preview": "{\n \"name\": \"In this tweet\",\n \"short_name\": \"In this tweet\",\n \"id\": \"inthistweet\",\n \"start_url\": \"/?utm_source=pwa\",\n"
},
{
"path": "public/netlify.toml",
"chars": 41,
"preview": "[functions]\ndirectory = \"dist/functions\"\n"
},
{
"path": "public/open-search.xml",
"chars": 671,
"preview": "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n<OpenSearchDescription xmlns=\"http://a9.com/-/spec/opensearch/1.1/\" xmlns:moz=\"ht"
},
{
"path": "public/robots.txt",
"chars": 73,
"preview": "Sitemap: https://inthistweet.app/sitemap-index.xml\nUser-agent: *\nAllow: /"
},
{
"path": "range-requests.mjs",
"chars": 13921,
"preview": "/*\n * This method throws if the supplied value is not an array.\n * The destructed values are required to produce a meani"
},
{
"path": "repl.ts",
"chars": 1207,
"preview": "// const json = await (await fetch(\"https://publish.twitter.com/oembed?url=https%3A%2F%2Ftwitter.com%2FCharlesPattson%2F"
},
{
"path": "src/components/custom-toast.svelte",
"chars": 7272,
"preview": "<script>\n import toast_ from 'svelte-french-toast';\n import { resolveValue, LoaderIcon, CheckmarkIcon, ErrorIcon } fro"
},
{
"path": "src/components/ffmpeg.svelte",
"chars": 30210,
"preview": "<script lang=\"ts\">\n import type { ViewUpdate } from \"@codemirror/view\";\n import type { ChangeSpec } from \"@codemirror/"
},
{
"path": "src/components/ffmpeg.ts",
"chars": 12038,
"preview": "\nimport type { createFFmpeg as ffmpegCreate, CreateFFmpegOptions } from \"@ffmpeg.wasm/main/src/index\";\nimport type { Str"
},
{
"path": "src/components/register-sw.svelte",
"chars": 2857,
"preview": "<script lang=\"ts\">\n import type {\n Renderable,\n DefaultToastOptions,\n ToastOptions,\n ToastType,\n } from \"s"
},
{
"path": "src/components/search.svelte",
"chars": 10359,
"preview": "<script lang=\"ts\">\n import type { MediaItem } from \"../lib/get-tweet\";\n import { writable } from \"svelte/store\";\n\timpo"
},
{
"path": "src/components/service-worker.ts",
"chars": 4245,
"preview": "import type { Workbox as TypeWorkbox } from \"workbox-window\";\nimport * as workbox from \"workbox-window\";\nimport { writab"
},
{
"path": "src/components/transition.ts",
"chars": 490,
"preview": "import { cubicInOut } from \"svelte/easing\";\n\nexport function blur(node, { delay = 0, duration = 400, easing = cubicInOut"
},
{
"path": "src/env.d.ts",
"chars": 126,
"preview": "/// <reference types=\"svelte\" />\n/// <reference types=\"astro/client\" />\n/// <reference types=\"unplugin-icons/types/svelt"
},
{
"path": "src/layouts/Layout.astro",
"chars": 7115,
"preview": "---\nimport \"fluent-svelte/theme.css\";\nimport \"@fontsource-variable/inter-tight/index.css\";\nimport \"@fontsource-variable/"
},
{
"path": "src/lib/codemirror.ts",
"chars": 380,
"preview": "import type { EditorStateConfig } from \"@codemirror/state\";\nimport { EditorView } from \"codemirror\";\nimport { writable }"
},
{
"path": "src/lib/ffmpeg.ts",
"chars": 4291,
"preview": "// import { FFmpeg } from \"../../node_modules/.pnpm/@ffmpeg+ffmpeg@0.12.7/node_modules/@ffmpeg/ffmpeg/dist/esm/classes.j"
},
{
"path": "src/lib/get-tweet.ts",
"chars": 13752,
"preview": "// Based on `react-tweet` (https://github.com/vercel/react-tweet) and `download-twitter-video` (https://github.com/egois"
},
{
"path": "src/lib/height.ts",
"chars": 344,
"preview": "import { writable } from \"svelte/store\";\n\nexport function syncHeight(el: HTMLElement, initial = 0) {\n return writable(i"
},
{
"path": "src/lib/m3u8/mod.ts",
"chars": 1738,
"preview": "// From https://deno.land/x/m3u8@v0.8.0/src/mod.ts by @fbritoferreira\n// https://github.com/fbritoferreira/m3u8-parser/t"
},
{
"path": "src/lib/m3u8/parser.ts",
"chars": 8853,
"preview": "import {\n Attributes,\n Options,\n Parameters,\n type ParsedLine,\n type Playlist,\n type PlaylistHeader,\n type Playli"
},
{
"path": "src/lib/m3u8/traverse.ts",
"chars": 4819,
"preview": "import { M3uMedia, M3uParser } from \"m3u-parser-generator\"\nimport { urlToFilePath } from \"./urls.ts\";\n\n/**\n * Converts a"
},
{
"path": "src/lib/m3u8/types.ts",
"chars": 1551,
"preview": "import { z } from \"zod\";\n\nexport interface PlaylistHeader {\n attrs: {\n \"x-tvg-url\": string;\n };\n raw: string;\n}\n\ne"
},
{
"path": "src/lib/m3u8/urls.ts",
"chars": 1019,
"preview": "/**\n * Converts a URL to a file path including the origin.\n * \n * This function takes a URL and transforms it into a fil"
},
{
"path": "src/lib/path/mod.ts",
"chars": 2307,
"preview": "// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.\n// This module is browser compatible.\n\n// Non"
},
{
"path": "src/lib/search.ts",
"chars": 2751,
"preview": "import type { ChangeSpec } from \"@codemirror/state\";\n// import type { FFmpeg } from \"@ffmpeg/ffmpeg\";\nimport type { FFmp"
},
{
"path": "src/lib/shell-lang.ts",
"chars": 5486,
"preview": "import type { StreamParser } from \"@codemirror/language\";\n\nvar words: Record<string, string> = {};\nfunction define(style"
},
{
"path": "src/lib/state.ts",
"chars": 6629,
"preview": "import { writable } from \"svelte/store\";\n\nexport interface FFmpegConfig {\n args: string[];\n inFilename: string;\n outF"
},
{
"path": "src/lib/transcode.ts",
"chars": 2593,
"preview": "// import type { FFmpeg } from \"@ffmpeg/ffmpeg\";\nimport type { FFmpeg } from \"@ffmpeg.wasm/main\";\nimport { get } from \"s"
},
{
"path": "src/lib/utils/chunk.ts",
"chars": 1274,
"preview": "// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.\n// This module is browser compatible.\n\n/**\n *"
},
{
"path": "src/lib/utils/debounce.ts",
"chars": 2245,
"preview": "// Copyright 2018-2023 the Deno authors. All rights reserved. MIT license.\n// This module is browser compatible.\n\n/**\n *"
},
{
"path": "src/lib/utils/diff.ts",
"chars": 545,
"preview": "/**\n * Returns the difference between two arrays (unique elements in array1 that are not present in array2).\n *\n * @temp"
},
{
"path": "src/lib/utils/url.ts",
"chars": 3886,
"preview": "export const ERROR_RESPONSE_BODY_READER = new Error(\n \"failed to get response body reader\"\n);\nexport const ERROR_INCOMP"
},
{
"path": "src/lib/vendor/core.ts",
"chars": 169,
"preview": "// @ts-ignore\n// import FFmpegCore from \"../../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.js\";\nimport FFmpegCo"
},
{
"path": "src/lib/vendor/worker.ts",
"chars": 220,
"preview": "// @ts-ignore\nimport \"../../../node_modules/@ffmpeg/core-mt/dist/esm/ffmpeg-core.worker.js\";\n// import FFmpegWorker from"
},
{
"path": "src/pages/api/twitter/index.ts",
"chars": 807,
"preview": "import type { APIContext } from \"astro\";\nimport type { Tweet } from \"../../../types/index\";\nimport { extractAndFormatMed"
},
{
"path": "src/pages/ffmpeg.astro",
"chars": 5267,
"preview": "---\nimport Layout from '../layouts/Layout.astro';\nimport FFmpegEditor from '../components/ffmpeg.svelte';\n\nimport ffmpeg"
},
{
"path": "src/pages/index.astro",
"chars": 5345,
"preview": "---\nimport type { APIContext } from 'astro';\n\nimport Layout from '../layouts/Layout.astro';\nimport Search from '../compo"
},
{
"path": "src/scripts/measure.ts",
"chars": 6689,
"preview": "export const hook = (_this, method, callback: (...args: unknown[]) => unknown) => {\n const orig = _this[method];\n\n ret"
},
{
"path": "src/types/card.ts",
"chars": 3365,
"preview": "import type { ImageColorValue, MediaDetails } from \"./media.ts\";\n\nexport interface TwitterCard {\n card_platform?: CardP"
},
{
"path": "src/types/edit.ts",
"chars": 150,
"preview": "export interface TweetEditControl {\n edit_tweet_ids: string[]\n editable_until_msecs: string\n is_edit_eligible: boolea"
},
{
"path": "src/types/entities.ts",
"chars": 684,
"preview": "export type Indices = [number, number]\n\nexport interface HashtagEntity {\n indices: Indices\n text: string\n}\n\nexport int"
},
{
"path": "src/types/index.ts",
"chars": 215,
"preview": "export * from './edit.ts'\nexport * from './entities.ts'\nexport * from './media.ts'\nexport * from './photo.ts'\nexport * f"
},
{
"path": "src/types/media.ts",
"chars": 1298,
"preview": "import type { Indices } from './entities.ts'\n\nexport type RGB = {\n red: number\n green: number\n blue: number\n}\n\nexport"
},
{
"path": "src/types/photo.ts",
"chars": 194,
"preview": "import type { Rect, RGB } from './media.ts'\n\nexport interface TweetPhoto {\n backgroundColor: RGB\n cropCandidates: Rect"
},
{
"path": "src/types/tweet.ts",
"chars": 2071,
"preview": "import type { TwitterCard } from './card.ts'\nimport type { TweetEditControl } from './edit.ts'\nimport type { Indices, Tw"
},
{
"path": "src/types/user.ts",
"chars": 254,
"preview": "export interface TweetUser {\n id_str: string\n name: string\n profile_image_url_https: string\n profile_image_shape: 'C"
},
{
"path": "src/types/video.ts",
"chars": 292,
"preview": "export interface TweetVideo {\n aspectRatio: [number, number]\n contentType: string\n durationMs: number\n mediaAvailabi"
},
{
"path": "tailwind.config.ts",
"chars": 872,
"preview": "import type { Config } from \"tailwindcss\"\n\nconst config: Config = {\n\tcontent: ['./src/**/*.{astro,html,js,jsx,md,mdx,sve"
},
{
"path": "tsconfig.json",
"chars": 264,
"preview": "{\n \"extends\": \"astro/tsconfigs/strict\",\n \"compilerOptions\": {\n \"allowArbitraryExtensions\": true,\n \"allowImportin"
},
{
"path": "vercel.json",
"chars": 2818,
"preview": "{\n \"cleanUrls\": true,\n \"trailingSlash\": false,\n \"headers\": [\n {\n \"source\": \"/(.*)\",\n \"headers\": [\n "
}
]
About this extraction
This page contains the full source code of the okikio/inthistweet GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 62 files (197.2 KB), approximately 55.5k tokens, and a symbol index with 148 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.