diff --git a/examples/r4-share-channel/index.html b/examples/r4-share-channel/index.html new file mode 100644 index 00000000..4b7595de --- /dev/null +++ b/examples/r4-share-channel/index.html @@ -0,0 +1,20 @@ + + + + + + r4-share-channel + + + + + + + + diff --git a/examples/r4-share-track/index.html b/examples/r4-share-track/index.html new file mode 100644 index 00000000..41e467e0 --- /dev/null +++ b/examples/r4-share-track/index.html @@ -0,0 +1,19 @@ + + + + + + + r4-share-track + + + + + + + + + diff --git a/examples/r4-share/index.html b/examples/r4-share/index.html deleted file mode 100644 index bfebaf29..00000000 --- a/examples/r4-share/index.html +++ /dev/null @@ -1,48 +0,0 @@ - - - - - - - r4-share - - - - - - -
  • Use the "origin" attribute to create the correct "share links"
    • -
  • - Use the "slug" and "track-id" attributes (also as query parameters - on this page) to share a specific channel (by its slug), or track (by its ID and channel slug) -
    • -
  • - Use the "api-origin" and "icon-origin" attributes to precise where the "iframe" and "icon image link" point to. -
    • -     - - - - - diff --git a/src/components/r4-share-channel.js b/src/components/r4-share-channel.js index 83797dec..1d332e16 100644 --- a/src/components/r4-share-channel.js +++ b/src/components/r4-share-channel.js @@ -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 `` + return ``; } + // Compute the icon HTML code get iconHtml() { - return `${this.channel.slug}@r4` + return `${this.channel.slug}@r4`; } - render() { - const channelUrl = this.origin && this.channel.slug ? this.origin.replace('{{slug}}', this.channel.slug) : '' - return html` -
    + 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` +
    + +
    + `; + } else { + return html`
    - +
    + `; + } + } + + buildChannelIframeDom() { + if (this.canNavigatorShare) { + return html`
    - - +
    + `; + } else { + return html`
    - - + +
    -
    - ` + `; + } + } + + buildChannelIconDom() { + if (this.canNavigatorShare) { + return html` +
    + +
    + `; + } else { + return html` +
    + + +
    + `; + } } + // ------------------------- + // Fallback: select text on click + // ------------------------- onInputClick(event) { - event.target.select() + event.target.select(); + } + + render() { + return html` +
    + ${this.buildChannelUrlDom()} + ${this.buildChannelIframeDom()} + ${this.buildChannelIconDom()} +
    + `; } createRenderRoot() { - return this + return this; } } diff --git a/src/components/r4-share-track.js b/src/components/r4-share-track.js index e7182687..a3071d6e 100644 --- a/src/components/r4-share-track.js +++ b/src/components/r4-share-track.js @@ -1,58 +1,160 @@ -import {LitElement, html} from 'lit' +import { LitElement, html } from 'lit'; export default class R4ShareTrack extends LitElement { static get properties() { return { - origin: {type: String}, - track: {type: Object}, - href: {type: String}, - } + origin: { type: String }, + track: { type: Object }, + href: { type: String }, + canNavigatorShare: { type: Boolean } + }; + } + + onInputClick(event) { + event.target.select(); } constructor() { - super() - this.track = {} + super(); + this.track = {}; + this.canNavigatorShare = !!navigator?.share; } get trackOriginUrl() { - return `${this.origin}${this.track.id}` + return `${this.origin}${this.track.id}`; } + get shareToR4Url() { - return `${this.href}/add?track_id=${this.track.id}` + return `${this.href}/add?track_id=${this.track.id}`; } - render() { - return html` -
    + shareService() { + if (this.canNavigatorShare) { + navigator.share({ + url: this.trackOriginUrl + }) + .catch(console.error); + } + } + + shareMedia() { + if (this.canNavigatorShare) { + navigator.share({ + url: this.track.url + }) + .catch(console.error); + } + } + + shareDiscogs() { + if (this.canNavigatorShare) { + navigator.share({ + url: this.track.discogs_url + }) + .catch(console.error); + } + } + + buildServiceUrlDom() { + if (this.canNavigatorShare) { + return html` +
    + +
    + `; + } else { + return html`
    - +
    + `; + } + } + + buildMediaUrlDom() { + if (this.canNavigatorShare) { + return html` +
    + +
    + `; + } else { + return html`
    - +
    + `; + } + } + + buildDiscogsUrlDom() { + if (!this.track.discogs_url) return html``; + if (this.canNavigatorShare) { + return html`
    - - - Add to channel - +
    -
    - ` + `; + } else { + return html` +
    + + +
    + `; + } } - onInputClick(event) { - event.target.select() + buildRepostDom() { + return html` +
    + + + Share on + + +
    + `; + } + + render() { + return html` +
    + ${this.buildServiceUrlDom()} + ${this.buildMediaUrlDom()} + ${this.buildDiscogsUrlDom()} + ${this.buildRepostDom()} +
    + `; } createRenderRoot() { - return this + return this; } }