Update msn, youtube, playgama

Author: sergei-playgama

package.json

@@ -1,6 +1,6 @@
 {
     "name": "playgama-bridge",
-    "version": "1.31.3",
+    "version": "1.31.4",
     "description": "One SDK for cross-platform publishing HTML5 games",
     "main": "index.js",
     "scripts": {
@@ -19,14 +19,14 @@
     },
     "repository": {
         "type": "git",
-        "url": "git+https://github.com/playgama/bridge"
+        "url": "git+https://github.com/Playgama/bridge"
     },
     "author": "Playgama",
     "license": "LGPL-3.0-or-later",
     "bugs": {
-        "url": "https://github.com/playgama/bridge/issues"
+        "url": "https://github.com/Playgama/bridge/issues"
     },
-    "homepage": "https://github.com/playgama/bridge",
+    "homepage": "https://github.com/Playgama/bridge",
     "dependencies": {},
     "devDependencies": {
         "@babel/core": "^7.17.8",

scripts/platforms.js

@@ -16,4 +16,13 @@ while ((match = regex.exec(source)) !== null) {
     }
 }
 
-module.exports = { ALL_PLATFORM_IDS }
+// Platforms that must always be bundled together with the key platform.
+const PLATFORM_BUNDLE_EXTRAS = {
+    playgama: ['standalone'],
+}
+
+const expandPlatforms = (platforms) => Array.from(
+    new Set(platforms.flatMap((id) => [id, ...(PLATFORM_BUNDLE_EXTRAS[id] || [])])),
+)
+
+module.exports = { ALL_PLATFORM_IDS, expandPlatforms }

src/platform-bridges/MsnPlatformBridge.js

@@ -100,6 +100,10 @@ class MsnPlatformBridge extends PlatformBridgeBase {
         return true
     }
 
+    get isAddToHomeScreenSupported() {
+        return typeof this._platformSdk?.promptInstallAsync === 'function'
+    }
+
     // leaderboards
     get leaderboardsType() {
         return LEADERBOARD_TYPE.NATIVE
@@ -295,6 +299,27 @@ class MsnPlatformBridge extends PlatformBridgeBase {
         })
     }
 
+    addToHomeScreen() {
+        let promiseDecorator = this._getPromiseDecorator(ACTION_NAME.ADD_TO_HOME_SCREEN)
+        if (!promiseDecorator) {
+            promiseDecorator = this._createPromiseDecorator(ACTION_NAME.ADD_TO_HOME_SCREEN)
+            this._platformSdk.promptInstallAsync()
+                .then((outcome) => {
+                    if (outcome === 'accepted') {
+                        this._resolvePromiseDecorator(ACTION_NAME.ADD_TO_HOME_SCREEN)
+                        return
+                    }
+
+                    this._rejectPromiseDecorator(ACTION_NAME.ADD_TO_HOME_SCREEN)
+                })
+                .catch((error) => {
+                    this._rejectPromiseDecorator(ACTION_NAME.ADD_TO_HOME_SCREEN, error)
+                })
+        }
+
+        return promiseDecorator.promise
+    }
+
     // leaderboards
     leaderboardsSetScore(id, score) {
         return new Promise((resolve, reject) => {
@@ -725,7 +750,7 @@ class MsnPlatformBridge extends PlatformBridgeBase {
     #updatePlayerInfo(data) {
         if (data) {
             this._isPlayerAuthorized = true
-            this._playerId = data.playerId
+            this._playerId = data.playerId ?? data.publisherPlayerId
             this._playerName = data.playerDisplayName
             this._playerExtra = data
             this.#isPaymentsSupported = data.userAccountType.toLowerCase() === 'personal'

src/platform-bridges/PlaygamaPlatformBridge.js

@@ -494,17 +494,22 @@ class PlaygamaPlatformBridge extends PlatformBridgeBase {
     }
 
     #getPlayer() {
-        if (!this.#isPlayerAuthorizationSupported) {
+        if (typeof this._platformSdk.userService?.getUser !== 'function') {
             this._playerApplyGuestData()
             return Promise.resolve()
         }
 
         return new Promise((resolve) => {
             this._platformSdk.userService.getUser()
                 .then((player) => {
+                    // The SDK id is used even for unauthorized players;
+                    // without it the locally generated guest id stays in place.
+                    if (player.id) {
+                        this._playerId = player.id
+                    }
+
                     if (player.isAuthorized) {
                         this._isPlayerAuthorized = true
-                        this._playerId = player.id
                         this._playerName = player.name
                         this._playerPhotos = player.photos
                         this._playerExtra = player

src/platform-bridges/YoutubePlatformBridge.js

@@ -62,6 +62,10 @@ class YoutubePlatformBridge extends PlatformBridgeBase {
         return false
     }
 
+    get isClipboardSupported() {
+        return false
+    }
+
     // leaderboards
     get leaderboardsType() {
         return LEADERBOARD_TYPE.NATIVE
@@ -71,6 +75,8 @@ class YoutubePlatformBridge extends PlatformBridgeBase {
 
     #subscribeNotification = null
 
+    #videoPreview = null
+
     initialize() {
         if (this._isInitialized) {
             return Promise.resolve()
@@ -81,6 +87,7 @@ class YoutubePlatformBridge extends PlatformBridgeBase {
 
             if (this.deviceType === DEVICE_TYPE.DESKTOP) {
                 this.#subscribeNotification = this.#createSubscribeNotification()
+                this.#videoPreview = this.#createVideoPreview()
             }
 
             waitFor('ytgame').then(() => {
@@ -280,6 +287,10 @@ class YoutubePlatformBridge extends PlatformBridgeBase {
                     this.#subscribeNotification.remove()
                     this.#subscribeNotification = null
                 }
+                if (this.#videoPreview) {
+                    this.#videoPreview.remove()
+                    this.#videoPreview = null
+                }
                 return Promise.resolve()
             }
             default: {
@@ -506,6 +517,93 @@ class YoutubePlatformBridge extends PlatformBridgeBase {
         document.body.appendChild(container)
         return container
     }
+
+    #createVideoPreview() {
+        const previews = (this._options.videoPreviews ?? [])
+            .filter((preview) => Boolean(preview?.image && preview?.videoId))
+        if (previews.length === 0) {
+            return null
+        }
+
+        const { image, videoId } = previews[Math.floor(Math.random() * previews.length)]
+
+        if (!document.getElementById('bridge-youtube-video-preview-styles')) {
+            const style = document.createElement('style')
+            style.id = 'bridge-youtube-video-preview-styles'
+            style.textContent = `
+                #bridge-youtube-video-preview {
+                    position: fixed;
+                    bottom: -24px;
+                    right: 24px;
+                    width: min(256px, 40vw);
+                    border-radius: 16px;
+                    overflow: hidden;
+                    background-color: #000;
+                    box-shadow: 0 8px 24px 0 rgba(0, 0, 0, 0.4);
+                    cursor: pointer;
+                    opacity: 0;
+                    z-index: 9999999;
+                    animation: bridge-yt-preview-rise 285ms ease-out 590ms forwards;
+                }
+
+                #bridge-youtube-video-preview .bridge-yt-preview-image {
+                    display: block;
+                    width: 100%;
+                    aspect-ratio: 16 / 9;
+                    object-fit: cover;
+                    user-select: none;
+                    -webkit-user-drag: none;
+                }
+
+                #bridge-youtube-video-preview .bridge-yt-preview-play {
+                    position: absolute;
+                    top: 50%;
+                    left: 50%;
+                    width: 48px;
+                    height: 34px;
+                    transform: translate(-50%, -50%);
+                    pointer-events: none;
+                }
+
+                @keyframes bridge-yt-preview-rise {
+                    0%   { bottom: -24px;  opacity: 0; }
+                    40%  { bottom: 25.6px; opacity: 1; }
+                    48%  { bottom: 33.6px; }
+                    60%  { bottom: 32px; }
+                    70%  { bottom: 30.4px; }
+                    79%  { bottom: 28.8px; }
+                    88%  { bottom: 27.2px; }
+                    95%  { bottom: 25.6px; }
+                    100% { bottom: 24px;   opacity: 1; }
+                }
+            `
+            document.head.appendChild(style)
+        }
+
+        const container = document.createElement('div')
+        container.id = 'bridge-youtube-video-preview'
+
+        const img = document.createElement('img')
+        img.className = 'bridge-yt-preview-image'
+        img.src = image
+        img.alt = ''
+        img.draggable = false
+        container.appendChild(img)
+
+        container.insertAdjacentHTML('beforeend', `
+            <svg class="bridge-yt-preview-play" viewBox="0 0 68 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+                <path d="M66.52 7.74C65.74 4.81 64.03 2.33 61.1 1.55C55.79 0.13 34 0 34 0C34 0 12.21 0.13 6.9 1.55C3.97 2.33 2.27 4.81 1.48 7.74C0.06 13.05 0 24 0 24C0 24 0.06 34.95 1.48 40.26C2.27 43.19 3.97 45.67 6.9 46.45C12.21 47.87 34 48 34 48C34 48 55.79 47.87 61.1 46.45C64.03 45.67 65.74 43.19 66.52 40.26C67.94 34.95 68 24 68 24C68 24 67.94 13.05 66.52 7.74Z" fill="#FF0033"/>
+                <path d="M45 24L27 14V34L45 24Z" fill="white"/>
+            </svg>
+        `)
+
+        container.addEventListener('click', () => {
+            window.ytgame?.engagement.openYTContent({ id: videoId }).catch(() => {})
+        })
+
+        document.body.appendChild(container)
+        return container
+    }
 }
 
 export default YoutubePlatformBridge

webpack.config.js

@@ -4,7 +4,7 @@ const webpack = require('webpack')
 const ESLintPlugin = require('eslint-webpack-plugin')
 const TerserPlugin = require('terser-webpack-plugin')
 const packageJson = require('./package.json')
-const { ALL_PLATFORM_IDS } = require('./scripts/platforms')
+const { ALL_PLATFORM_IDS, expandPlatforms } = require('./scripts/platforms')
 
 const platformDirName = 'platform-bridges'
 const CDN_BASE_URL = `https://bridge.playgama.com/v${packageJson.version.split('.')[0]}/stable/`
@@ -101,7 +101,7 @@ const createConfig = (targetPlatforms = [], { noLint = false } = {}) => ({
 
 module.exports = (env = {}, argv = {}) => {
     const targetPlatform = env.platform || ''
-    const targetPlatforms = targetPlatform ? targetPlatform.split(',') : []
+    const targetPlatforms = targetPlatform ? expandPlatforms(targetPlatform.split(',')) : []
     const noLint = Boolean(env.noLint)
     const isDevelopment = argv.mode === 'development'