df2a717e8d
## Ticket 1526: strange thumbnail size requested on mobile layout (pc only?) ## General Problem It was trying to fetch based on the exact size of the video container, which would satisfy Core Vitals (in an overkill way), but would bring several issues: - server-side caching would not work since everyone's window size is different in a responsive layout design. - the additional 200ms wait for container size to settle down is not good (hardcoded wait time). - the code did not account for device-pixel-ratio, so it's quite a futile effort. Aside: In the past, we used to take the same image url as the tiles, so the video poster would appear immediately from due to browser cache, but the quality is bad because the tile requested a much smaller size. The embed wrapper was not going through the CDN either as a null `containerRef` was passed in. ## Change Removed the container-size check and just request for 1280x720. Reasons for this size: - On average, that would be the ballpark of the final calculated value anyway for the average screen (+DPR consideration). - That seems to be the current suggested thumbnail size in most recommendations. - Our YT Sync is grabbing a much smaller size anyway. |
||
---|---|---|
.github | ||
.tx | ||
build | ||
custom | ||
electron | ||
extras | ||
flow-typed | ||
homepages | ||
static | ||
ui | ||
web | ||
.env.defaults | ||
.eslintignore | ||
.eslintrc | ||
.flowconfig | ||
.gitignore | ||
.lintstagedrc.json | ||
.prettierignore | ||
.prettierrc.json | ||
.sentryclirc | ||
babel.config.js | ||
config.js | ||
CONTRIBUTING.md | ||
electron-builder.json | ||
LICENSE | ||
package.json | ||
postcss.config.js | ||
README.md | ||
webpack.base.config.js | ||
webpack.electron.config.js | ||
yarn.lock |
Odysee Frontend - Odysee.com
This repo contains the UI and front end code that powers Odysee.com.
Table of Contents
Usage
Go to the website to interact on this frontend.
Running from Source
Prerequisites
- Clone (or fork) this repository:
git clone https://github.com/OdyseeTeam/odysee-frontend
- Change directory into the cloned repository:
cd odysee-frontend
- Install the dependencies:
yarn
Run the web app for development
yarn dev:web
- This uses
webpack-dev-server
and includes hot-reloading. If you want to debug the web server we use in production you can runyarn dev:web-server
. This starts a server atlocalhost:1337
and does not include hot reloading.
Customize the web app
- In root directory, duplicate the
.env.default
file as.env
and make customizations there.cp .env.defaults .env nano .env
- To specify your own OG-IMAGE:
- Either place a png named
v2-og.png
in the/custom
folder or specify theOG_IMAGE_URL
in .env file.
- Either place a png named
- To specify your own channels to be followed on first run:
AUTO_FOLLOW_URLS=lbry://@chan#123...a lbry://@chan2#456...a
- To customize the homepage content:
- Add
CUSTOM_HOMEPAGE=true
to the .env file. - Copy
/custom/homepage.example.js
to/custom/homepage.js
and make desired changes tohomepage.js
.
- Add
- Finally, run
NODE_ENV=production yarn compile:web
to rebuild.- Note: You do not need to edit the
.env
file in the/web
folder - that is copied during compilation.
- Note: You do not need to edit the
Deploy the web app (experimental)
- Create a server with a domain name and a reverse proxy https to port 1337.
- Install pm2, node v10, yarn
- Clone this repo
- Make any customizations as above
- Run
yarn
to install - Run
NODE_ENV=production yarn compile:web
to build - Set up pm2 to start ./web/index.js
Resetting your Packages
If the app isn't building, or yarn xxx
commands aren't working you may need to just reset your node_modules
. To do so you can run: rm -r node_modules && yarn
or del /s /q node_modules && yarn
on Windows.
If you really think something might have gone wrong, you can force your repo to clear everything that doesn't match the repo with git reset --hard HEAD && git clean -fxd && git pull -r
Contributing
We ❤️ contributions from everyone and contributions to this project are encouraged, and compensated. We welcome bug reports, bug fixes and feedback is always appreciated. For more details, see CONTRIBUTING.md.
License
This project is MIT licensed. For the full license, see LICENSE.
Security
For security issues, please reach out to security@odysee.com