diff --git a/src/routes/MetaDetails/StreamsList/Stream/Stream.js b/src/routes/MetaDetails/StreamsList/Stream/Stream.js index a86d0c463..068c8b369 100644 --- a/src/routes/MetaDetails/StreamsList/Stream/Stream.js +++ b/src/routes/MetaDetails/StreamsList/Stream/Stream.js @@ -5,19 +5,21 @@ const PropTypes = require('prop-types'); const classnames = require('classnames'); const Icon = require('@stremio/stremio-icons/dom'); const { Button, Image, PlayIconCircleCentered, useProfile, platform, useStreamingServer } = require('stremio/common'); +const { useServices } = require('stremio/services'); const StreamPlaceholder = require('./StreamPlaceholder'); const styles = require('./styles'); const Stream = ({ className, addonName, name, description, thumbnail, progress, deepLinks, ...props }) => { const profile = useProfile(); const streamingServer = useStreamingServer(); + const { core } = useServices(); const haveStreamingServer = streamingServer.settings !== null && streamingServer.settings.type === 'Ready'; const href = React.useMemo(() => { return deepLinks ? profile.settings.playerType === 'external' ? platform.isMobile() || !haveStreamingServer ? (deepLinks.externalPlayer.vlc || {})[platform.name] || deepLinks.externalPlayer.href - : 'javascript:void(0);' // handled in StreamsList.js onClick + : 'javascript:void(0);' : typeof deepLinks.player === 'string' ? deepLinks.player @@ -26,16 +28,33 @@ const Stream = ({ className, addonName, name, description, thumbnail, progress, : null; }, [deepLinks]); + const onClick = React.useCallback((e) => { + if (e.target.closest('a').getAttribute('href') === 'javascript:void(0);') { + // link does not lead to the player, it is expected to + // open with local video player through the streaming server + core.transport.dispatch({ + action: 'StreamingServer', + args: { + action: 'PlayOnDevice', + args: { + device: 'vlc', + source: deepLinks.externalPlayer.streaming + } + } + }); + } + props.onClick(e); + }, [deepLinks, props.onClick]); const forceDownload = React.useMemo(() => { // we only do this in one case to force the download // of a M3U playlist generated in the browser - return href === deepLinks.externalPlayer.href ? 'playlist.m3u' : false + return href === deepLinks.externalPlayer.href ? 'playlist.m3u' : false; }, [href]); const renderThumbnailFallback = React.useCallback(() => ( ), []); return ( - + { typeof thumbnail === 'string' && thumbnail.length > 0 ? @@ -82,9 +101,11 @@ Stream.propTypes = { android: PropTypes.string, desktop: PropTypes.string }, - href: PropTypes.string + href: PropTypes.string, + streaming: PropTypes.string }) - }) + }), + onClick: PropTypes.func }; module.exports = Stream; diff --git a/src/routes/MetaDetails/StreamsList/StreamsList.js b/src/routes/MetaDetails/StreamsList/StreamsList.js index cfa8f7b64..853e337b3 100644 --- a/src/routes/MetaDetails/StreamsList/StreamsList.js +++ b/src/routes/MetaDetails/StreamsList/StreamsList.js @@ -27,21 +27,7 @@ const StreamsList = ({ className, ...props }) => { addon: streams.addon, streams: streams.content.content.map((stream) => ({ ...stream, - onClick: (e) => { - if (e.target.getAttribute('href') === 'javascript:void(0);') { - // link does not lead to the player, it is expected to - // open with local video player through the streaming server - core.transport.dispatch({ - action: 'StreamingServer', - args: { - action: 'PlayOnDevice', - args: { - device: 'vlc', - source: stream.deepLinks.externalPlayer.streaming - } - } - }); - } + onClick: () => { core.transport.analytics({ event: 'StreamClicked', args: {