Skip to content

Commit

Permalink
7.2
Browse files Browse the repository at this point in the history
- Add Artists & Albums to Library.
-   
- Full Support for Fetching playback data via Invidious on UIA (Turn on 'fetch stream data via invidious' in Settings>Playback).
-   
- Improved Action Menu (Previously SuperModal).
-   
- Improved Library Tap Targets.
-  
- Added Toast Notifications & Fetch Instances Toggle.
-  
- Added minimal tooltips for buttons on playback screen for landscape users.
-  
- Substantial Image processing optimizations.
-  
- Support for injecting custom Invidious & Hyperpipe instances.
  • Loading branch information
n-ce authored Aug 20, 2024
1 parent a1a310f commit 5510221
Show file tree
Hide file tree
Showing 37 changed files with 981 additions and 672 deletions.
18 changes: 18 additions & 0 deletions .github/workflows/updater.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,18 @@
on:
pull_request:
push:
branches:
- instances
schedule:
- cron: "*/30 * * * *"

permissions:
contents: write

jobs:
update:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v4
- uses: oven-sh/setup-bun@v2
- run: bun updater.ts
2 changes: 1 addition & 1 deletion CONTRIBUTING.md
Original file line number Diff line number Diff line change
Expand Up @@ -17,5 +17,5 @@
- [Five](https://deploy-preview-60--ytify.netlify.app/)
- [Five.final](https://deploy-preview-118--ytify.netlify.app/)
- [Six.beta](https://deploy-preview-124--ytify.netlify.app/)
- [Six.lite](https://deploy-preview-193--ytify.netlify.app)
- [Six.lite](https://lite--ytify.netlify.app)
- [Seven](https://deploy-preview-187--ytify.netlify.app)
4 changes: 2 additions & 2 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,8 @@
<a href="https://ytify.netlify.app"><img src="public/ytify_thumbnail_max.webp" width="70%"></a>

[![Netlify Status](https://api.netlify.com/api/v1/badges/fbbcc532-3ef6-41fc-b61e-26cb17cfb6ba/deploy-status)](https://app.netlify.com/sites/ytify/deploys)
[![Tokei Lines Of Code](https://tokei.rs/b1/github/n-ce/ytify?style=flat&color=black)](https://github.com/n-ce/ytify)
[![Telegram Members](https://img.shields.io/endpoint?style=flat&url=https://mogyo.ro/quart-apis/tgmembercount?chat_id=ytifytg)](https://t.me/encetg)
[![Matrix](https://img.shields.io/matrix/ytify:matrix.org?label=Matrix)](https://matrix.to/#/!ytify:matrix.org)
[![Matrix](https://img.shields.io/matrix/ytify:matrix.org?label=Matrix)](https://matrix.to/#/#ytify:matrix.org)

</div>

Expand Down Expand Up @@ -80,6 +79,7 @@ npm run dev -- --open
## Acknowledgements 🙏
- [Piped](https://github.com/teampiped/piped) - YouTube Data API & Adaptive Streaming Proxy
- [Invidious](https://invidious.io) - YouTube Data API & Progressive Streaming Proxy
- [Hyperpipe](https://codeberg.org/Hyperpipe/hyperpipe-backend) - YT Music Artist Data API
- [Cobalt](https://github.com/wukko/cobalt) - YouTube Download API
- [wsrv](https://wsrv.nl) - Image Proxy Provider
- [Solid](https://github.com/solidjs/solid) - Delightful JSX Library
Expand Down
93 changes: 47 additions & 46 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -68,9 +68,15 @@
</nav>
<div id="miniPlayer">
<img id="img" crossorigin="anonymous" alt="Current Playing Media Thumbnail">
<div>
<a id="title" href="" target="_blank">Now Playing</a>
<div id="mp">

<div id="mptext">
<a id="title" href="" target="_blank">Now Playing</a>
<p id="author">Channel</p>
</div>

<button class="ri-stop-circle-fill" id="playButton" aria-label="play" data-playbackState="none"></button>

</div>
</div>
</header>
Expand All @@ -87,11 +93,11 @@
<!-- image -->
<div id="meta">
<!-- title -->
<p id="author">Channel</p>
<!-- author -->

<div id="upperButtonLayer">
<span id="volumeContainer">
<label for="volumeChanger" class="ri-volume-up-fill"></label>
<label for="volumeChanger" aria-label="volume" class="ri-volume-up-fill"></label>
<input type="range" min="0" max="100" value="100" id="volumeChanger">
</span>
<i class="ri-repeat-line" id="loopButton" aria-label="loop"></i>
Expand Down Expand Up @@ -189,6 +195,7 @@ <h1>upcoming streams show here</h1>
</optgroup>
<optgroup label="YouTube Music">
<option value="music_songs">Songs</option>
<option value="music_artists">Artists</option>
<option value="music_videos">Videos</option>
<option value="music_albums">Albums</option>
<option value="music_playlists">Playlists</option>
Expand All @@ -202,27 +209,29 @@ <h1>upcoming streams show here</h1>
<ul id="suggestions"></ul>
<div id="searchlist">
<p style="
background: var(--onBg);
color: inherit;
background:url('/ytify_banner.webp') center;
padding: 5vmin;
box-shadow: var(--shadow);
border-radius: var(--roundness);
background-size:cover;
margin-bottom:4%;
color:white;
" align="center">
<img src="/ytify_banner.webp" style="
border-radius: calc(var(--roundness) / 1.4);" loading="lazy" />
<br />
Welcome to ytify, a fast, lightweight, personalisable, minimal and free audio streaming platform. Learn more
about how to use
the WebApp effectively, <a href="https://github.com/n-ce/ytify/wiki/usage" style="text-decoration: underline;"
target="_blank">here</a>.
<b style="background-color:#0003;
display:block;
backdrop-filter: blur(2px);
">
Welcome to ytify, a fast, lightweight, personalisable, minimal and free audio streaming platform. Learn more
about how to use
the WebApp effectively, <a href="https://github.com/n-ce/ytify/wiki/usage"
style="text-decoration: underline;" target="_blank">here</a>.
</b>
</p>
<h3 style="color:var(--text);background:#f007;border-radius:var(--roundness);padding:4vmin">Most Piped Instances
are banned,
fetching is being performed via
Invidious not all
features may work as expected. See <a
href="https://github.com/TeamNewPipe/NewPipe/issues/11139">Newpipe#11139</a> for more info.</h3>
<p
style="background: linear-gradient(to bottom right,#f007,#f008);border-radius:var(--roundness);font-size:large;padding:5vmin;box-shadow:var(--shadow)">
To get around the errors on Piped Instances, Please turn on <b>Fetch stream data via Invidious</b> in
Settings >
Playback. This does not apply to HLS/IOS users.</p>
</div>
</section>

Expand All @@ -248,15 +257,24 @@ <h3 style="color:var(--text);background:#f007;border-radius:var(--roundness);pad
<i class="ri-calendar-schedule-line"></i>Listen Later
</a>
</div>
<select id="superCollectionSelector">
<option value="collections">Your Collections</option>
<option value="featured" selected>Featured Playlists</option>
<option value="playlists">Subscribed Playlists</option>
<option value="channels">Subscribed Channels
</option>
<option value="feed">Subscription Feed
</option>
</select>

<div id="superCollectionSelector">
<input type="radio" id="r.featured" name="superCollectionChips" value="featured" checked>
<label for="r.featured">Featured</label>
<input type="radio" id="r.collections" name="superCollectionChips" value="collections">
<label for="r.collections">Collections</label>
<input type="radio" id="r.playlists" name="superCollectionChips" value="playlists">
<label for="r.playlists">Playlists</label>
<input type="radio" id="r.albums" name="superCollectionChips" value="albums">
<label for="r.albums">Albums</label>
<input type="radio" id="r.artists" name="superCollectionChips" value="artists">
<label for="r.artists">Artists</label>
<input type="radio" id="r.channels" name="superCollectionChips" value="channels">
<label for="r.channels">Channels</label>

<input type="radio" id="r.feed" name="superCollectionChips" value="feed">
<label for="r.feed">Subscription Feed</label>
</div>

<div id="superCollectionList"></div>

Expand Down Expand Up @@ -351,24 +369,7 @@ <h1>playlist, channel or your collection items show here</h1>

</main>

<dialog id="superModal">
<ul>
<li><i class="ri-skip-forward-line"></i>Play Next</li>
<li><i class="ri-list-check-2"></i>Enqueue</li>
<li>
<i class="ri-play-list-add-line"></i>
<select id="playlistSelector">
<option>Add To</option>
<option value="+pl">Create New Playlist</option>
<option value="favorites">Favorites</option>
<option value="listenLater">Listen Later</option>
</select>
</li>
<li><i class="ri-radio-line"></i>Start Radio</li>
<li><i class="ri-download-2-fill"></i>Download</li>
<li><i class="ri-youtube-line"></i>View Channel</li>
</ul>
</dialog>
<dialog id="actionsMenu"></dialog>

<dialog id="loadingScreen">
<i class="ri-loader-3-line"></i>
Expand Down
11 changes: 9 additions & 2 deletions netlify/edge-functions/opengraph.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,11 +15,18 @@ export default async (request: Request, context: Context) => {
const instance = 'https://invidious.jing.rocks';
const data = await fetch(instance + '/api/v1/videos/' + id).then(res => res.json());

if (!data) return;

const music = data.author.endsWith(' - Topic') ? '&w=720&h=720&fit=cover' : '';

if (music)
data.author = data.author.replace(' - Topic', '');

const newPage = page
.replace('48-160kbps Opus YouTube Audio Streaming Web App.', data.author.replace(' - Topic', ''))
.replace('48-160kbps Opus YouTube Audio Streaming Web App.', data.author)
.replace('"ytify"', `"${data.title}"`)
.replace(<string>context.site.url, `${context.site.url}?s=${id}`)
.replaceAll('/ytify_thumbnail_min.webp', data.videoThumbnails.find((v: { quality: string }) => v.quality === 'medium').url)
.replaceAll('/ytify_thumbnail_min.webp', `https://wsrv.nl?url=https://i.ytimg.com/vi_webp/${id}/maxresdefault.webp${music}`);

return new Response(newPage, response);
};
Expand Down
16 changes: 8 additions & 8 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "ytify",
"version": "7.1.8",
"version": "7.2.0",
"type": "module",
"scripts": {
"dev": "vite",
Expand All @@ -9,23 +9,23 @@
"update": "npx npm-check-updates -u"
},
"dependencies": {
"hls.js": "^1.5.13",
"hls.js": "^1.5.14",
"imsc": "^1.1.5",
"solid-js": "^1.8.19",
"solid-js": "^1.8.21",
"sortablejs": "^1.15.2"
},
"devDependencies": {
"@netlify/edge-functions": "^2.10.0",
"@types/node": "^22.0.2",
"@types/node": "^22.4.1",
"@types/sortablejs": "^1.15.8",
"autoprefixer": "^10.4.19",
"eruda": "^3.2.1",
"autoprefixer": "^10.4.20",
"eruda": "^3.2.3",
"typescript": "^5.5.4",
"vite": "^5.3.5",
"vite": "^5.4.1",
"vite-plugin-pwa": "^0.20.1",
"vite-plugin-solid": "^2.10.2"
},
"browserslist": [
"defaults"
]
}
}
59 changes: 59 additions & 0 deletions src/components/ActionsMenu.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,59 @@
#actionsMenu {
border: var(--border);
box-shadow: var(--shadow);
padding: 2dvmin 1dvmin;
width: 100%;
margin: 8dvmin auto;
margin-top: auto;
border-radius: calc(var(--roundness) * 1.3);
background-color: var(--bg);
animation: fromBelow 0.3s;
overflow: auto;


@media(orientation:landscape) {
width: max-content;
margin: auto 8dvmin;
margin-left: auto;
animation-name: fromRight;

}

ul {
list-style: none;
padding: 2dvmin;
width: auto;
display: grid;
gap: 2vmin;
}

li {
color: var(--text);
font-size: large;
user-select: none;
display: flex;
align-items: center;
gap: 5dvmin;
padding: 1vmin 2vmin;
border: 0.1vmin solid transparent;
border-radius: var(--roundness);

&:hover {
border: var(--border);
background: var(--onBg);
}

i {
font-weight: normal;
font-size: larger;
}
}

}

#playlistSelector {
font-weight: inherit;
font-size: inherit;
margin-left: -3px;
width: 9ch;
}
Loading

0 comments on commit 5510221

Please sign in to comment.