Skip to content

Feat/r4 share native #193

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Feat/r4 share native #193

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
503cacb
add example pages for r4-share-{track,channel} components
4www Mar 2, 2025
d2ddef8
add r4-share-{track,channel} handling for navigator.share
4www Mar 2, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
20 changes: 20 additions & 0 deletions examples/r4-share-channel/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>r4-share-channel</title>
<script type="module" src="/src/index.js"></script>
</head>
<body>
<r4-share-channel></r4-share-channel>

<script>
const params = new URLSearchParams(window.location.search);
const slug = params.get('slug') || "example-slug";
const shareChannelEl = document.querySelector('r4-share-channel');
shareChannelEl.setAttribute('origin', window.location.origin + `/${slug}/`);
shareChannelEl.setAttribute('channel', JSON.stringify({ slug }));
</script>
</body>
</html>
19 changes: 19 additions & 0 deletions examples/r4-share-track/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width" />
<link rel="icon" href="data:;base64,iVBORw0KGgo=" />
<title>r4-share-track</title>
<meta name="description" content="r4-share-track" />
<script type="module" src="/src/index.js"></script>
</head>

<body>
<r4-share-track
origin="https://example.com/app/"
href="https://example.com"
track='{"id": "123", "url": "https://media.example.com/track.mp3", "title": "Example Track", "discogs_url": "https://www.discogs.com/master/822931-Mort-Garson-Mother-Earths-Plantasia"}'>
</r4-share-track>
</body>
</html>
48 changes: 0 additions & 48 deletions examples/r4-share/index.html
View file
Open in desktop

This file was deleted.

153 changes: 128 additions & 25 deletions src/components/r4-share-channel.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,55 +1,158 @@
import {LitElement, html} from 'lit'
import { LitElement, html } from 'lit';

export default class R4ShareChannel extends LitElement {
static get properties() {
return {
origin: {type: String},
playerOrigin: {type: String, attribute: 'player-origin'},
iconOrigin: {type: String, attribute: 'icon-origin'},
channel: {type: Object},
}
origin: { type: String },
playerOrigin: { type: String, attribute: 'player-origin' },
iconOrigin: { type: String, attribute: 'icon-origin' },
channel: { type: Object },
canNavigatorShare: { type: Boolean }
};
}

constructor() {
super()
this.playerOrigin = 'https://player.radio4000.com/v2'
this.iconOrigin = 'https://assets.radio4000.com/icon-r4.svg'
this.channel = {}
super();
this.playerOrigin = 'https://player.radio4000.com/v2';
this.iconOrigin = 'https://assets.radio4000.com/icon-r4.svg';
this.channel = {};
this.canNavigatorShare = !!navigator.share;
}


get channelUrl() {
return this.origin
}

get iframeHtml() {
return `<iframe src="${this.playerOrigin}/?slug=${this.channel.slug}" width="320" height="500" frameborder="0"></iframe>`
return `<iframe src="${this.playerOrigin}/?slug=${this.channel.slug}" width="320" height="500" frameborder="0"></iframe>`;
}

// Compute the icon HTML code
get iconHtml() {
return `<a href="${this.origin}"><img width="30" src="${this.iconOrigin}" title="${this.channel.slug}@r4" alt="${this.channel.slug}@r4"></a>`
return `<a href="${this.origin}"><img width="30" src="${this.iconOrigin}" title="${this.channel.slug}@r4" alt="${this.channel.slug}@r4"></a>`;
}

render() {
const channelUrl = this.origin && this.channel.slug ? this.origin.replace('{{slug}}', this.channel.slug) : ''
return html`
<form>
shareChannelUrl() {
if (navigator.share) {
navigator.share({
url: this.channelUrl
})
.catch((error) => console.error('Error sharing channel URL:', error));
}
}

shareChannelIframe() {
if (navigator.share) {
navigator.share({
text: this.iframeHtml,
})
.catch((error) => console.error('Error sharing channel embed:', error));
}
}

shareChannelIcon() {
if (navigator.share) {
navigator.share({
text: this.iconHtml
})
.catch((error) => console.error('Error sharing channel icon:', error));
}
}

buildChannelUrlDom() {
if (this.canNavigatorShare) {
return html`
<fieldset>
<button type="button" @click="${this.shareChannelUrl}">
Share channel URL
</button>
</fieldset>
`;
} else {
return html`
<fieldset>
<label for="channel_url">Channel URL</label>
<input readonly name="channel_url" type="url" value="${channelUrl}" @click="${this.onInputClick}" />
<input
readonly
name="channel_url"
type="url"
.value="${this.channelUrl}"
@click="${this.onInputClick}"
/>
</fieldset>
`;
}
}

buildChannelIframeDom() {
if (this.canNavigatorShare) {
return html`
<fieldset>
<label for="channel_iframe">Channel &lt;iframe&gt; embed</label>
<input readonly name="channel_iframe" type="url" value="${this.iframeHtml}" @click="${this.onInputClick}" />
<button type="button" @click="${this.shareChannelIframe}">
Share &lt;iframe&gt; embed code
</button>
</fieldset>
`;
} else {
return html`
<fieldset>
<label for="channel_icon">Channel Icon</label>
<input readonly name="channel_icon" type="url" value="${this.iconHtml}" @click="${this.onInputClick}" />
<label for="channel_iframe">Channel &lt;iframe&gt; embed code</label>
<input
readonly
name="channel_iframe"
type="text"
.value="${this.iframeHtml}"
@click="${this.onInputClick}"
/>
</fieldset>
</form>
`
`;
}
}

buildChannelIconDom() {
if (this.canNavigatorShare) {
return html`
<fieldset>
<button type="button" @click="${this.shareChannelIcon}">
Share channel icon link
</button>
</fieldset>
`;
} else {
return html`
<fieldset>
<label for="channel_icon">Channel icon link</label>
<input
readonly
name="channel_icon"
type="text"
.value="${this.iconHtml}"
@click="${this.onInputClick}"
/>
</fieldset>
`;
}
}

// -------------------------
// Fallback: select text on click
// -------------------------
onInputClick(event) {
event.target.select()
event.target.select();
}

render() {
return html`
<form>
${this.buildChannelUrlDom()}
${this.buildChannelIframeDom()}
${this.buildChannelIconDom()}
</form>
`;
}

createRenderRoot() {
return this
return this;
}
}
Loading