Add a basic and rudimentary integration of Tidal

This commit is contained in:
SondreB 2023-02-08 19:35:41 +01:00
parent 1a04262e0d
commit f20c032c1a
No known key found for this signature in database
GPG Key ID: D6CC44C75005FDBF
4 changed files with 38 additions and 8 deletions

View File

@ -11,6 +11,7 @@ export interface Options {
showLines: boolean;
showMediaPlayer?: boolean;
enableSpotify?: boolean;
enableTidal?: boolean;
hideSideLabels?: boolean;
primaryRelay?: string;
peopleDisplayType: number;

View File

@ -6,7 +6,6 @@
</ng-template>
<ng-template matTabContent>
<div class="page">
<app-relays [relays]="relayService.items2"></app-relays>
<!-- <mat-accordion class="example-headers-align" multi>
@ -59,10 +58,9 @@
<!-- <button mat-stroked-button (click)="toggle()"><span *ngIf="!open">Expand All</span><span *ngIf="open">Collapse All</span></button>
<br /> -->
<button mat-flat-button color="primary" (click)="getRelays()">Append from extension</button><button mat-flat-button color="primary" (click)="getDefaultRelays()">Append from app</button>
<br>
<br />
<button mat-flat-button (click)="dataService.publishContactsAndRelays()">Publish relay (and following) list</button><br /><br />
<button mat-flat-button color="warn" (click)="deleteRelays()">Delete all relays</button>
</div>
</div>
</ng-template>
@ -99,9 +97,14 @@
<br />
<mat-card>
<mat-card-header>
<mat-card-title>Media widgets</mat-card-title>
<mat-card-subtitle>Control how content are rendered</mat-card-subtitle>
</mat-card-header>
<mat-card-content>
<p>Enable this to allow the app to render Spotify widgets when URLs linked to Spotify is seen in notes.</p>
<mat-slide-toggle class="options-slider" (change)="optionsService.save()" [(ngModel)]="optionsService.values.enableSpotify">Enable Spotify integration</mat-slide-toggle>
<p>Enable this to allow the app to render music widgets when URLs linked to the services is seen in notes.</p>
<mat-slide-toggle class="options-slider" (change)="optionsService.save()" [(ngModel)]="optionsService.values.enableSpotify">Enable Spotify</mat-slide-toggle>
<mat-slide-toggle class="options-slider" (change)="optionsService.save()" [(ngModel)]="optionsService.values.enableTidal">Enable Tidal</mat-slide-toggle>
</mat-card-content>
</mat-card>
</div>

View File

@ -8,9 +8,7 @@
</div>
<ng-template [ngIf]="spotify">
<!-- {{spotify | json}} -->
<iframe
*ngFor="let song of spotify"
style="border-radius: 12px"
@ -24,6 +22,21 @@
></iframe>
</ng-template>
<ng-template [ngIf]="tidal">
<!-- {{spotify | json}} -->
<iframe
*ngFor="let song of tidal"
style="border-radius: 12px"
[src]="song"
width="100%"
height="152"
frameborder="0"
allowfullscreen=""
allow="autoplay; clipboard-write; encrypted-media; fullscreen; picture-in-picture"
loading="lazy"
></iframe>
</ng-template>
<!-- <div id="embed-iframe"></div> -->
<!-- <div class="container-16-9">

View File

@ -25,11 +25,13 @@ export class ContentComponent {
images: SafeResourceUrl[] = [];
videos: SafeResourceUrl[] = [];
spotify: SafeResourceUrl[] = [];
tidal: SafeResourceUrl[] = [];
static regexpImage = /(?:(?:https?)+\:\/\/+[a-zA-Z0-9\/\._-]{1,})+(?:(?:jpe?g|png|gif|webp))/gi;
static regexpVideo = /(?:https?:\/\/)?(?:www\.)?youtu\.?be(?:\.com)?\/?.*(?:watch|embed)?(?:.*v=|v\/|\/)([\w-_]+)/gim;
static regexpThisIsTheWay = /(?:thisistheway.gif)/g;
static regexpSpotify = /((http|https?)?(.+?\.?)(open.spotify.com)(.+?\.?)?)/gi;
static regexpTidal = /((http|https?)?(.+?\.?)(tidal.com)(.+?\.?)?)/gi;
static regexpUrl = /([\w+]+\:\/\/)?([\w\d-]+\.)*[\w-]+[\.\:]\w+([\/\?\=\&\#.]?[\w-]+)*\/?/gi;
// static regexpVideo = /^((?:https?:)?\/\/)?((?:www|m)\.)?((?:youtube\.com|youtu.be))(\/(?:[\w\-]+\?v=|embed\/|v\/)?)([\w\-]+)(\S+)?$/g;
@ -91,8 +93,19 @@ export class ContentComponent {
content = content.replaceAll(ContentComponent.regexpVideo, '');
content = content.replaceAll(ContentComponent.regexpThisIsTheWay, '');
if (this.optionsService.values.enableTidal) {
// After doing image, video and known memes, get all URLs and handle Tidal.
const urls = [...content.matchAll(ContentComponent.regexpUrl)];
const tidalUrl = urls.filter((url) => url[0].indexOf('tidal.com') > -1);
this.tidal = tidalUrl.map((i) => this.utilities.sanitizeUrlAndBypassFrame(i[0].replace('tidal.com/track', 'embed.tidal.com/tracks')));
for (let index = 0; index < tidalUrl.length; index++) {
content = content.replace(tidalUrl[index][0], '');
}
}
if (this.optionsService.values.enableSpotify) {
// After doing image, video and known memes, get all URLs and handle spotify.
// After doing image, video and known memes, get all URLs and handle Spotify.
const urls = [...content.matchAll(ContentComponent.regexpUrl)];
const spotifyUrl = urls.filter((url) => url[0].indexOf('open.spotify.com') > -1);
this.spotify = spotifyUrl.map((i) => this.utilities.sanitizeUrlAndBypassFrame(i[0].replace('open.spotify.com/', 'open.spotify.com/embed/')));