Use Learn content viewer when available

kolibri_explore_plugin/assets/src/kolibriApi.js

@@ -6,7 +6,7 @@ import { ContentNodeKinds } from 'kolibri.coreVue.vuex.constants';
 import router from 'kolibri.coreVue.router';
 import store from 'kolibri.coreVue.vuex.store';
 import { utils } from 'eos-components';
-import { showTopicsContentInLightbox } from './modules/topicsTree/handlers';
+import { showTopicsContent } from './modules/topicsTree/handlers';
 import { PageNames } from './constants';
 import { getChannelIcon } from './customApps';
 
@@ -39,7 +39,7 @@ class KolibriApi {
   }
 
   navigateTo(nodeId) {
-    showTopicsContentInLightbox(store, nodeId);
+    showTopicsContent(store, nodeId);
   }
 
   closeCustomPresentation() {

kolibri_explore_plugin/assets/src/modules/topicsTree/handlers.js

@@ -127,7 +127,7 @@ export function showTopicsChannel(store, id) {
   });
 }
 
-export function showTopicsContentInLightbox(store, id) {
+function showTopicsContentInLightbox(store, id) {
   const promises = [ContentNodeResource.fetchModel({ id }), store.dispatch('setChannelInfo')];
   const shouldResolve = samePageCheckGenerator(store);
   Promise.all(promises).then(
@@ -161,6 +161,22 @@ export function showTopicsContentInLightbox(store, id) {
   );
 }
 
-export function hideTopicsContentFromLightbox(store) {
+function showTopicsContentInLearnTab(learnUrl, id) {
+  // Pass current URL as prevName:
+  const prevName = encodeURIComponent(window.location.href);
+  const contentViewerUrl = `${learnUrl()}#/topics/c/${id}?prevName=${prevName}`;
+  window.location.replace(contentViewerUrl);
+}
+
+export function showTopicsContent(store, id) {
+  const learnUrl = urls['kolibri:kolibri.plugins.learn:learn'];
+  if (learnUrl) {
+    showTopicsContentInLearnTab(learnUrl, id);
+  } else {
+    showTopicsContentInLightbox(store, id);
+  }
+}
+
+export function hideTopicsContent(store) {
   store.commit('topicsTree/RESET_CONTENT');
 }

kolibri_explore_plugin/assets/src/views/ContentModal.vue

@@ -20,10 +20,7 @@
 
   import { mapState } from 'vuex';
   import { responsiveMixin } from 'eos-components';
-  import {
-    hideTopicsContentFromLightbox,
-    showTopicsContentInLightbox,
-  } from '../modules/topicsTree/handlers';
+  import { hideTopicsContent, showTopicsContent } from '../modules/topicsTree/handlers';
   import ContentItem from './ContentItem';
 
   export default {
@@ -86,10 +83,10 @@
       },
 
       goToContent(id) {
-        showTopicsContentInLightbox(this.$store, id);
+        showTopicsContent(this.$store, id);
       },
       onClose() {
-        hideTopicsContentFromLightbox(this.$store);
+        hideTopicsContent(this.$store);
       },
     },
   };

packages/eos-components/src/components/ContentCard.vue

@@ -7,7 +7,7 @@
       'shadow': isHovered,
     }"
   >
-    <ContentLink :url="url" @isHovered="(hovered) => isHovered = hovered">
+    <ContentLink :url="url" :nodeId="node.id" @isHovered="(hovered) => isHovered = hovered">
       <b-card-body>
         <div
           class="card-img"

packages/eos-components/src/components/ContentLink.vue

@@ -17,14 +17,24 @@ export default {
       type: String,
       required: true,
     },
+    nodeId: {
+      type: String,
+      required: false,
+      default: null,
+    },
   },
   emits: ['isHovered'],
   methods: {
     handleHover(hovered) {
       this.$emit('isHovered', hovered);
     },
     onClick() {
-      this.$router.push(this.url);
+      if (this.nodeId) {
+        window.kolibri.navigateTo(this.nodeId);
+      }
+      else {
+        this.$router.push(this.url);
+      }
     },
   },
 };