@streamlayer/feature-gamification 0.37.4 → 0.38.0

package/lib/background.d.ts

@@ -1,5 +1,6 @@
 import { ApiStore, type StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
 import type { GetApiResponseType } from '@streamlayer/sdk-web-api';
+import { FeedItem } from '@streamlayer/sdk-web-types';
 import '@streamlayer/sdk-web-core/store';
 import { ReadableAtom, WritableAtom } from 'nanostores';
 import * as queries from './queries';
@@ -24,7 +25,10 @@ export declare class GamificationBackground {
      */
     interactiveAllowed: WritableAtom<InteractiveAllowed>;
     /** opened question, using to download statistics */
-    openedQuestionId: WritableAtom<string | undefined>;
+    openedQuestionId: WritableAtom<{
+        questionId: string;
+        question?: FeedItem;
+    } | undefined>;
     /** opened question statistics */
     openedQuestion: ReturnType<typeof detail>;
     /** last active question in feed */
@@ -60,7 +64,7 @@ export declare class GamificationBackground {
     /**
      * Open question and mark notification for this question as viewed
      */
-    openQuestion: (questionId: string) => void;
+    openQuestion: (questionId: string, question?: FeedItem) => void;
     /**
      * Close question and mark notification for this question as viewed
      */

package/lib/background.js

@@ -53,10 +53,10 @@ export class GamificationBackground {
         this.feedList = new ApiStore(queries.$feedList(this.slStreamId, this.interactiveAllowed, instance.transport), 'gamification:feedList');
         this.activeQuestionId = new ApiStore(queries.$activeQuestion(this.slStreamId, instance.transport), 'gamification:activeQuestionId');
         this.openedQuestion = detail(instance.transport, this.openedQuestionId, this.feedList.getStore());
-        this.openedQuestionId.listen((questionId) => {
-            this.log.debug({ questionId }, 'received question');
-            if (questionId) {
-                this.questionSubscription = queries.questionSubscription(questionId, instance.transport);
+        this.openedQuestionId.listen((item) => {
+            this.log.debug({ item }, 'received question');
+            if (item?.questionId) {
+                this.questionSubscription = queries.questionSubscription(item.questionId, instance.transport);
                 this.questionSubscription.addListener('feed-subscription-opened-question', (response) => {
                     window.requestAnimationFrame(() => {
                         this.openedQuestion.updateExtendedQuestion(response.data?.attributes?.question);
@@ -77,6 +77,7 @@ export class GamificationBackground {
         this.feedSubscription.addListener('feed-subscription-active-question', (response) => {
             const $activeQuestionId = this.activeQuestionId.getStore();
             if ($activeQuestionId) {
+                this.activeQuestionId;
                 $activeQuestionId.mutate(response.data?.attributes);
             }
         });
@@ -124,8 +125,8 @@ export class GamificationBackground {
     /**
      * Open question and mark notification for this question as viewed
      */
-    openQuestion = (questionId) => {
-        this.openedQuestionId.set(questionId);
+    openQuestion = (questionId, question) => {
+        this.openedQuestionId.set({ questionId, question });
         this.notifications.markAsViewed(this.getCurrentSessionId({ prefix: 'notification', entity: questionId }));
     };
     /**

package/lib/detail.d.ts

@@ -1,16 +1,18 @@
 import type { Transport } from '@streamlayer/sdk-web-api';
+import { FeedItem, ExtendedQuestion } from '@streamlayer/sdk-web-types';
 import { ReadableAtom } from 'nanostores';
-import { getQuestionByUser } from './queries';
 import { type GamificationBackground } from './background';
-type ExtendedQuestion = Awaited<ReturnType<typeof getQuestionByUser>>;
 type ExtendedQuestionStore = {
     data?: ExtendedQuestion;
     loading?: boolean;
     error?: string;
 };
-export declare const detail: (transport: Transport, $openedQuestionId: ReadableAtom<string | undefined>, $feedList: ReturnType<GamificationBackground['feedList']['getStore']>) => {
-    $store: ReadableAtom<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem | undefined>;
+export declare const detail: (transport: Transport, $openedQuestionId: ReadableAtom<{
+    questionId: string;
+    question?: FeedItem;
+} | undefined>, $feedList: ReturnType<GamificationBackground['feedList']['getStore']>) => {
+    $store: import("nanostores").WritableAtom<import("@bufbuild/protobuf").PlainMessage<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem> | undefined>;
     $extendedStore: import("nanostores").MapStore<ExtendedQuestionStore>;
-    updateExtendedQuestion: (question: ExtendedQuestion) => void;
+    updateExtendedQuestion: (question: ExtendedQuestion | undefined) => void;
 };
 export {};

package/lib/detail.js

@@ -1,6 +1,6 @@
-import { createMapStore } from '@streamlayer/sdk-web-interfaces';
+import { createMapStore, createSingleStore } from '@streamlayer/sdk-web-interfaces';
 import { deepmerge } from '@fastify/deepmerge';
-import { computed } from 'nanostores';
+import { onMount } from 'nanostores';
 import { getQuestionByUser } from './queries';
 const mergeArray = (options) => (target, source) => {
     let i = 0;
@@ -20,17 +20,42 @@ const mergeArray = (options) => (target, source) => {
 };
 const mergeQuestion = deepmerge({ mergeArray });
 export const detail = (transport, $openedQuestionId, $feedList) => {
-    const $store = computed([$openedQuestionId, $feedList], (openedQuestion, feedList) => {
-        if (openedQuestion) {
-            const question = feedList.data?.find((item) => item.id === openedQuestion);
-            if (question) {
-                return question;
+    const $store = createSingleStore(undefined);
+    onMount($store, () => {
+        const cancel1 = $openedQuestionId.subscribe((openedQuestion) => {
+            if (openedQuestion) {
+                if (openedQuestion.question) {
+                    $store.set(openedQuestion.question);
+                    return;
+                }
+                const question = $feedList.get().data?.find((item) => item.id === openedQuestion.questionId);
+                if (question) {
+                    $store.set(question);
+                }
+                else {
+                    console.error('Feed list is not loaded yet. Issue with the opened question.');
+                }
             }
             else {
-                console.error('Feed list is not loaded yet. Issue with the opened question.');
+                $store.set(undefined);
             }
-        }
-        return undefined;
+        });
+        const cancel2 = $feedList.subscribe((feedList) => {
+            const openedQuestion = $openedQuestionId.get();
+            if (feedList.data && openedQuestion) {
+                const question = $feedList.get().data?.find((item) => item.id === openedQuestion.questionId);
+                if (question) {
+                    $store.set(question);
+                }
+                else {
+                    console.error('Feed list is not loaded yet. Issue with the opened question.');
+                }
+            }
+        });
+        return () => {
+            cancel1();
+            cancel2();
+        };
     });
     const $extendedStore = createMapStore({
         data: undefined,

package/lib/gamification.d.ts

@@ -1,5 +1,5 @@
 import { AbstractFeature, ApiStore, FeatureSource, type FeatureProps, type StreamLayerContext } from '@streamlayer/sdk-web-interfaces';
-import { type GamesOverlaySettings } from '@streamlayer/sdk-web-types';
+import { type GamesOverlaySettings, FeedItem } from '@streamlayer/sdk-web-types';
 import type { GetApiResponseType } from '@streamlayer/sdk-web-api';
 import '@streamlayer/sdk-web-core/store';
 import type { PlainMessage } from '@bufbuild/protobuf';
@@ -57,7 +57,7 @@ export declare class Gamification extends AbstractFeature<'games', PlainMessage<
     disconnect: () => void;
     submitAnswer: (questionId: string, answerId: string) => Promise<void>;
     skipQuestion: (questionId: string) => Promise<void>;
-    openQuestion: (questionId: string) => void;
+    openQuestion: (questionId: string, question?: FeedItem) => void;
     closeQuestion: (questionId?: string) => void;
     openUser: (userId: string) => void;
     closeUser: () => void;

package/lib/gamification.js

@@ -114,6 +114,7 @@ export class Gamification extends AbstractFeature {
             }
             window.requestAnimationFrame(async () => {
                 const question = response.data?.attributes?.question;
+                const feedItem = response.data?.attributes?.feedItem;
                 if (!question) {
                     return;
                 }
@@ -125,11 +126,11 @@ export class Gamification extends AbstractFeature {
                     const question = await queries.getQuestionByUser(id, transport);
                     const correctAnswer = question?.answers.find(({ correct }) => correct);
                     const votedAnswer = question?.answers.find(({ youVoted }) => youVoted);
-                    if (!votedAnswer)
+                    if (!votedAnswer || !question)
                         return;
                     this.notifications.add({
                         type: NotificationType.QUESTION_RESOLVED,
-                        action: () => this.openQuestion(id),
+                        action: () => this.openQuestion(question.id, feedItem),
                         close: () => this.closeQuestion(id),
                         autoHideDuration: correctAnswer?.youVoted ? 15000 : 12000,
                         id: notificationId,
@@ -174,13 +175,12 @@ export class Gamification extends AbstractFeature {
         this.feedList.invalidate();
         this.userSummary.invalidate();
     };
-    openQuestion = (questionId) => {
-        this.openFeature();
+    openQuestion = (questionId, question) => {
         this.notifications.close(this.background.getCurrentSessionId({
             prefix: 'notification',
             entity: questionId,
         }));
-        return this.background.openQuestion(questionId);
+        return this.background.openQuestion(questionId, question);
     };
     closeQuestion = (questionId) => {
         return this.background.closeQuestion(questionId);
@@ -204,15 +204,13 @@ export class Gamification extends AbstractFeature {
             if (question.data.question?.id !== undefined &&
                 question.data.question.notification !== undefined &&
                 question.data.question?.bypassNotifications?.inAppSilence !== SilenceSetting.ON &&
-                question.data.question.status === QuestionStatus.ACTIVE) {
+                question.data.question.status === QuestionStatus.ACTIVE &&
+                !question.data.question.marketClosed) {
                 if (InteractiveQuestionTypes.has(question.data.question.type)) {
                     if (this.isInteractiveAllowed) {
                         this.notifications.add({
                             type: NotificationType.QUESTION,
-                            action: () => {
-                                question.data?.question && this.openQuestion(question.data.question.id);
-                                this.openFeature();
-                            },
+                            action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
                             close: () => question.data?.question && this.closeQuestion(question.data.question.id),
                             autoHideDuration: 1000 * 60,
                             id: this.background.getCurrentSessionId({
@@ -233,7 +231,7 @@ export class Gamification extends AbstractFeature {
                     const instantView = {
                         heading: question.data.question.notification.title,
                         body: question.data.question.notification.body,
-                        imageMode: question.data.question.appearance?.images,
+                        imageMode: optionsValue.imageMode,
                         image: optionsValue?.image,
                         video: {
                             id: optionsValue?.video?.id || '',
@@ -247,10 +245,7 @@ export class Gamification extends AbstractFeature {
                     };
                     this.notifications.add({
                         type: NotificationType.QUESTION,
-                        action: () => {
-                            question.data?.question && this.openQuestion(question.data.question.id);
-                            this.openFeature();
-                        },
+                        action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
                         close: () => question.data?.question && this.closeQuestion(question.data.question.id),
                         autoHideDuration: 1000 * 120,
                         id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),
@@ -269,13 +264,11 @@ export class Gamification extends AbstractFeature {
                         account: optionsValue?.tweetMeta?.account || '',
                         accountVerified: !!optionsValue?.tweetMeta?.accountVerified,
                         tweet: optionsValue?.tweetMeta?.tweet,
+                        tweetId: question.data.question.id,
                     };
                     this.notifications.add({
                         type: NotificationType.QUESTION,
-                        action: () => {
-                            question.data?.question && this.openQuestion(question.data.question.id);
-                            this.openFeature();
-                        },
+                        action: () => question.data?.question && this.openQuestion(question.data.question.id, question.data.feedItem),
                         close: () => question.data?.question && this.closeQuestion(question.data.question.id),
                         autoHideDuration: 1000 * 120,
                         id: this.background.getCurrentSessionId({ prefix: 'notification', entity: question.data.question.id }),

package/lib/queries/actions.js

@@ -1,13 +1,16 @@
 import { Feed } from '@streamlayer/sl-eslib/interactive/feed/interactive.feed_connect';
 export const submitAnswer = (transport, data) => {
-    const { client } = transport.createPromiseClient(Feed, { method: 'submitAnswer' });
-    return client.submitAnswer({ data });
+    const { client, createRequestOptions } = transport.createPromiseClient(Feed, { method: 'submitAnswer' });
+    const contextValues = createRequestOptions({ retryAttempts: 0 });
+    return client.submitAnswer({ data }, { contextValues });
 };
 export const submitInplay = (transport, eventId) => {
-    const { client } = transport.createPromiseClient(Feed, { method: 'submitInplay' });
-    return client.submitInplay({ data: { eventId: +eventId } });
+    const { client, createRequestOptions } = transport.createPromiseClient(Feed, { method: 'submitInplay' });
+    const contextValues = createRequestOptions({ retryAttempts: 0 });
+    return client.submitInplay({ data: { eventId: +eventId } }, { contextValues });
 };
 export const skipQuestion = (transport, questionId) => {
-    const { client } = transport.createPromiseClient(Feed, { method: 'skipQuestion' });
-    return client.skipQuestion({ data: { id: questionId } });
+    const { client, createRequestOptions } = transport.createPromiseClient(Feed, { method: 'skipQuestion' });
+    const contextValues = createRequestOptions({ retryAttempts: 0 });
+    return client.skipQuestion({ data: { id: questionId } }, { contextValues });
 };

package/lib/queries/index.d.ts

@@ -327,9 +327,9 @@ export declare const questionSubscription: (questionId: string, transport: Trans
         };
     };
 }, QuestionSubscriptionRequest, QuestionSubscriptionResponse, "subscription" | "votingSubscription" | "questionSubscription" | "feedSubscription", ((request: import("@bufbuild/protobuf").PartialMessage<SubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<SubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<VotingSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<VotingSubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<QuestionSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<QuestionSubscriptionResponse>) | ((request: import("@bufbuild/protobuf").PartialMessage<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedSubscriptionRequest>, options?: import("@connectrpc/connect").CallOptions | undefined) => AsyncIterable<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedSubscriptionResponse>)>;
-export declare const getQuestionByUser: (questionId: string, transport: Transport) => Promise<import("@streamlayer/sdk-web-types").ExtendedQuestion | undefined>;
+export declare const getQuestionByUser: (questionId: string, transport: Transport) => Promise<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion | undefined>;
 export declare const getQuestionDetail: (questionId: string, transport: Transport) => Promise<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").Question | undefined>;
-export declare const $questionByUser: ($questionId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sdk-web-types").ExtendedQuestion | undefined, any>;
+export declare const $questionByUser: ($questionId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/interactive.common_pb").ExtendedQuestion | undefined, any>;
 export declare const $pickHistory: (slStreamId: ReadableAtom<string | undefined>, transport: Transport) => import("@nanostores/query").FetcherStore<(import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").PickHistory | undefined)[], any>;
 export declare const $feedList: ($slStreamId: ReadableAtom<string | undefined>, $interactiveAllowed: ReadableAtom<InteractiveAllowed>, transport: Transport) => import("@nanostores/query").FetcherStore<import("@streamlayer/sl-eslib/interactive/feed/interactive.feed_pb").FeedItem[], any>;
 export { $userSummary, $leaderboardList } from './leaderboard';

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@streamlayer/feature-gamification",
-  "version": "0.37.4",
+  "version": "0.38.0",
   "peerDependencies": {
-    "@bufbuild/protobuf": "^1.6.0",
+    "@bufbuild/protobuf": "^1.7.2",
     "@fastify/deepmerge": "*",
-    "@streamlayer/sl-eslib": "^5.67.0",
+    "@streamlayer/sl-eslib": "^5.79.3",
     "nanostores": "^0.9.5",
-    "@streamlayer/sdk-web-api": "^0.22.0",
-    "@streamlayer/sdk-web-core": "^0.21.2",
-    "@streamlayer/sdk-web-interfaces": "^0.20.5",
-    "@streamlayer/sdk-web-logger": "^0.5.16",
-    "@streamlayer/sdk-web-notifications": "^0.14.1",
-    "@streamlayer/sdk-web-storage": "^0.4.3",
-    "@streamlayer/sdk-web-types": "^0.22.3"
+    "@streamlayer/sdk-web-api": "^0.23.0",
+    "@streamlayer/sdk-web-core": "^0.21.3",
+    "@streamlayer/sdk-web-interfaces": "^0.20.6",
+    "@streamlayer/sdk-web-logger": "^0.5.17",
+    "@streamlayer/sdk-web-notifications": "^0.14.2",
+    "@streamlayer/sdk-web-storage": "^0.4.4",
+    "@streamlayer/sdk-web-types": "^0.22.4"
   },
   "devDependencies": {
     "tslib": "^2.6.2"