[mobile only] Sharing isn’t so mobile friendly

[peterklingelhofer]

Operating system

iOS 15.3.1

Browser name and version

stream-app 1.1.1 (Safari)

Expected behavior

For mobile users, sharing should present the user with the default sharing options for that user's phone.

Actual behavior

For mobile users, sharing presents the user with a modal where the user can copy a URL/iframe.

Steps to reproduce behavior

Go to any track/tracklist and click the ellipse menu button and press share.

Navigator Can Share could be helpful here.

[peterklingelhofer]

Would have thought something like this would work, but it appears navigator.canShare is undefined in this area of code. (I'm testing on my phone in Firefox, and going to this MDN page and scrolling down to click the test button does successfully share the MDN link, so I know it's supported by my phone's browser.)

diff --git a/beta/src/views/playlist/index.js b/beta/src/views/playlist/index.js
index 717d2ec..15fa1fd 100644
--- a/beta/src/views/playlist/index.js
+++ b/beta/src/views/playlist/index.js
@@ -78,7 +78,9 @@ function renderPlaylist (state, emit) {
           <div class="flex items-center absolute z-999 right-0 mr1-l" style="top:100%">
             ${state.cache(MenuButtonOptions, `menu-button-options-playlist-${slug}`).render({
               items: [], // no custom items yet
-              selection: [props.private ? 'edit' : 'share', 'profile'],
+              selection: [props.private
+                ? 'edit'
+                : `${navigator.canShare ? 'shareMobile' : 'share'}`, 'profile'],
               data: {
                 creator_id: creatorId,
                 cover: cover,
diff --git a/packages/menu-button-options-component/index.js b/packages/menu-button-options-component/index.js
index 4d75822..97defa2 100644
--- a/packages/menu-button-options-component/index.js
+++ b/packages/menu-button-options-component/index.js
@@ -478,6 +478,12 @@ function menuButtonItems (state, emit) {
       actionName: 'share',
       updateLastAction: shareAction
     },
+    {
+      iconName: 'share',
+      text: 'Share',
+      actionName: 'shareMobile',
+      updateLastAction: shareMobile
+    },
     {
       iconName: 'share',
       text: 'Make Playlist Public',
@@ -655,6 +661,30 @@ function menuButtonItems (state, emit) {
     document.body.appendChild(dialogEl)
   }

+  /**
+   * @description Display sharing dialog with buttons to copy paste current url and embed link
+   * @param {Object} data Action data
+   * @param {String} data.url The url to share
+   * @param {String} data.title The title (playlist, track, release, ...)
+   * @param {String} data.artist The artist display name
+   */
+
+  function shareMobile ({ url, title, artist }) {
+    if (navigator.canShare) {
+      (async () => {
+        try {
+          await navigator.share({
+            text: `Listen to ${artist} · ${title} on Resonate`,
+            title,
+            url
+          })
+        } catch (e) {
+          console.error(e)
+        }
+      })()
+    }
+  }
+
   /**
    * @description Redirect user to edit their private playlist
    * @param {Object} data Action data