Merge pull request #37 from Aar-if/newaltv1

Player, Telemetry and api changes

packages/common-lib/src/components/SunbirdPlayer.js

@@ -12,6 +12,12 @@ const SunbirdPlayer = ({
   ...props
 }) => {
   const { mimeType } = props
+
+  const typeMatch = mimeType.match(/\/(.+)$/)
+  const fileType = typeMatch ? typeMatch[1] : null
+
+  localStorage.setItem('contentType', fileType)
+
   let trackData = []
   const [url, setUrl] = React.useState()
   React.useEffect(() => {
@@ -54,6 +60,10 @@ const SunbirdPlayer = ({
 
   const handleEvent = (event) => {
     const data = event?.data
+    let milliseconds = event?.data.edata.duration
+    let seconds = milliseconds / 1000
+    localStorage.setItem('totalDuration', seconds)
+
     let telemetry = {}
     if (data && typeof data?.data === 'string') {
       telemetry = JSON.parse(data.data)

packages/common-lib/src/services/Telemetry/telemetryFactory.js

@@ -17,7 +17,7 @@ const telemetryConfig = {
   did: 'did',
   authtoken: '',
   studentid: 'student-id',
-  uid: 'user-id',
+  uid: localStorage.getItem('id'),
   sid: 'session-id',
   batchsize: 1,
   mode: '',
@@ -53,7 +53,6 @@ export const telemetryFactory = {
 
   impression: (impressionEventInput) => {
     const eventData = getEventData(impressionEventInput)
-    console.log('check eventData', eventData)
     if (CsTelemetryModule.instance.isInitialised) {
       CsTelemetryModule.instance.telemetryService.raiseImpressionTelemetry({
         options: eventData.options,
@@ -65,7 +64,7 @@ export const telemetryFactory = {
   // This API is used to log telemetry of assessments that have occured when the user is viewing content
   assess: (assessEventInput) => {
     const eventData = getEventData(assessEventInput)
-    
+
     if (CsTelemetryModule.instance.isInitialised) {
       CsTelemetryModule.instance.telemetryService.raiseAssesTelemetry({
         options: eventData.options,
@@ -78,10 +77,9 @@ export const telemetryFactory = {
 
   response: (responseEventInput) => {
     const eventData = getEventData(responseEventInput)
-    
+
     if (CsTelemetryModule.instance.isInitialised) {
       CsTelemetryModule.instance.telemetryService.raiseResponseTelemetry({
-
         options: eventData.options,
         edata: eventData.edata
       })
@@ -128,13 +126,15 @@ export const telemetryFactory = {
 }
 
 function getEventData(eventInput) {
+  const timestamp = Date.now()
   const event = {
     edata: eventInput.edata,
     options: {
       context: getEventContext(eventInput),
       object: getEventObject(eventInput),
       tags: []
-    }
+    },
+    ets: timestamp
   }
   return event
 }
@@ -159,7 +159,7 @@ function getEventContext(eventInput) {
     pdata: eventInput.context.pdata || telemetryConfig.pdata,
     env: eventInput.context.env || telemetryConfig.env,
     sid: eventInput.sid || telemetryConfig.sid,
-    uid: 'user-id', //user id
+    uid: localStorage.getItem('id'), //user id
     cdata: eventInput.context.cdata || []
   }
   if (telemetryConfig.sid) {

packages/common-lib/src/services/subjectListRegistryService.js

@@ -21,6 +21,7 @@ export const getProgramId = async (props) => {
     { headers }
   )
   if (programID?.data?.data) {
+    localStorage.setItem('programID', programID?.data?.data[0]?.programId)
     return programID?.data?.data[0]
   }
 }

packages/players/content-player/index.html

@@ -22,7 +22,6 @@
         previewElement.addEventListener("message", (event) => {
           window?.top?.postMessage(event, "*");
           alert("event");
-          console.log("On telemetryEvent", event);
         });
       };
 
@@ -37,7 +36,6 @@
       window.addEventListener(
         "message",
         (event) => {
-          console.log(event);
           passData(event?.data);
         },
         false

packages/players/pdf/index.html

@@ -128,8 +128,8 @@
       const myPlayer = document.getElementById("my-player");
       myPlayer.appendChild(pdfElement);
       pdfElement.addEventListener("playerEvent", (event) => {
-        console.log("On playerEvent", event);
         window?.parent?.postMessage(event?.detail, "*");
+        window?.parent?.postMessage(event, "*");
       });
     </script>
   </body>

packages/players/quml/assets/styles/quml-carousel.css

@@ -0,0 +1,240 @@
+html, body {
+    height: 100%;
+  }
+  .carousel {
+    position: relative;
+  }
+
+  .carousel-inner {
+    position: relative;
+    width: 100%;
+    overflow: hidden;
+  }
+
+  .carousel-item {
+    position: relative;
+    display: none;
+    -ms-flex-align: center;
+    align-items: center;
+    width: 100%;
+    transition: -webkit-transform 0.6s ease;
+    transition: transform 0.6s ease;
+    transition: transform 0.6s ease, -webkit-transform 0.6s ease;
+    -webkit-backface-visibility: hidden;
+    backface-visibility: hidden;
+    -webkit-perspective: 1000px;
+    perspective: 1000px;
+  }
+
+  @media screen and (prefers-reduced-motion: reduce) {
+    .carousel-item {
+      transition: none;
+    }
+  }
+
+  .carousel-item.active,
+  .carousel-item-next,
+  .carousel-item-prev {
+    display: block;
+  }
+
+  .carousel-item-next,
+  .carousel-item-prev {
+    position: absolute;
+    top: 0;
+  }
+
+  .carousel-item-next.carousel-item-left,
+  .carousel-item-prev.carousel-item-right {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
+    .carousel-item-next.carousel-item-left,
+    .carousel-item-prev.carousel-item-right {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .carousel-item-next,
+  .active.carousel-item-right {
+    -webkit-transform: translateX(100%);
+    transform: translateX(100%);
+  }
+
+  @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
+    .carousel-item-next,
+    .active.carousel-item-right {
+      -webkit-transform: translate3d(100%, 0, 0);
+      transform: translate3d(100%, 0, 0);
+    }
+  }
+
+  .carousel-item-prev,
+  .active.carousel-item-left {
+    -webkit-transform: translateX(-100%);
+    transform: translateX(-100%);
+  }
+
+  @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
+    .carousel-item-prev,
+    .active.carousel-item-left {
+      -webkit-transform: translate3d(-100%, 0, 0);
+      transform: translate3d(-100%, 0, 0);
+    }
+  }
+
+  .carousel-fade .carousel-item {
+    opacity: 0;
+    transition-duration: .6s;
+    transition-property: opacity;
+  }
+
+  .carousel-fade .carousel-item.active,
+  .carousel-fade .carousel-item-next.carousel-item-left,
+  .carousel-fade .carousel-item-prev.carousel-item-right {
+    opacity: 1;
+  }
+
+  .carousel-fade .active.carousel-item-left,
+  .carousel-fade .active.carousel-item-right {
+    opacity: 0;
+  }
+
+  .carousel-fade .carousel-item-next,
+  .carousel-fade .carousel-item-prev,
+  .carousel-fade .carousel-item.active,
+  .carousel-fade .active.carousel-item-left,
+  .carousel-fade .active.carousel-item-prev {
+    -webkit-transform: translateX(0);
+    transform: translateX(0);
+  }
+
+  @supports ((-webkit-transform-style: preserve-3d) or (transform-style: preserve-3d)) {
+    .carousel-fade .carousel-item-next,
+    .carousel-fade .carousel-item-prev,
+    .carousel-fade .carousel-item.active,
+    .carousel-fade .active.carousel-item-left,
+    .carousel-fade .active.carousel-item-prev {
+      -webkit-transform: translate3d(0, 0, 0);
+      transform: translate3d(0, 0, 0);
+    }
+  }
+
+  .carousel-control-prev,
+  .carousel-control-next {
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-align: center;
+    align-items: center;
+    -ms-flex-pack: center;
+    justify-content: center;
+    width: 15%;
+    color: #fff;
+    text-align: center;
+    opacity: 0.5;
+  }
+
+  .carousel-control-prev:hover, .carousel-control-prev:focus,
+  .carousel-control-next:hover,
+  .carousel-control-next:focus {
+    color: #fff;
+    text-decoration: none;
+    outline: 0;
+    opacity: .9;
+  }
+
+  .carousel-control-prev {
+    left: 0;
+  }
+
+  .carousel-control-next {
+    right: 0;
+  }
+
+  .carousel-control-prev-icon,
+  .carousel-control-next-icon {
+    display: inline-block;
+    width: 20px;
+    height: 20px;
+    background: transparent no-repeat center center;
+    background-size: 100% 100%;
+  }
+
+  .carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3E%3C/svg%3E");
+  }
+
+  .carousel-control-next-icon {
+    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%23fff' viewBox='0 0 8 8'%3E%3Cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3E%3C/svg%3E");
+  }
+
+  .carousel-indicators {
+    position: absolute;
+    right: 0;
+    bottom: 10px;
+    left: 0;
+    z-index: 15;
+    display: -ms-flexbox;
+    display: flex;
+    -ms-flex-pack: center;
+    justify-content: center;
+    padding-left: 0;
+    margin-right: 15%;
+    margin-left: 15%;
+    list-style: none;
+  }
+
+  .carousel-indicators li {
+    position: relative;
+    -ms-flex: 0 1 auto;
+    flex: 0 1 auto;
+    width: 30px;
+    height: 3px;
+    margin-right: 3px;
+    margin-left: 3px;
+    text-indent: -999px;
+    cursor: pointer;
+    background-color: rgba(255, 255, 255, 0.5);
+  }
+
+  .carousel-indicators li::before {
+    position: absolute;
+    top: -10px;
+    left: 0;
+    display: inline-block;
+    width: 100%;
+    height: 10px;
+    content: "";
+  }
+
+  .carousel-indicators li::after {
+    position: absolute;
+    bottom: -10px;
+    left: 0;
+    display: inline-block;
+    width: 100%;
+    height: 10px;
+    content: "";
+  }
+
+  .carousel-indicators .active {
+    background-color: #fff;
+  }
+
+  .carousel-caption {
+    position: absolute;
+    right: 15%;
+    bottom: 20px;
+    left: 15%;
+    z-index: 10;
+    padding-top: 20px;
+    padding-bottom: 20px;
+    color: #fff;
+    text-align: center;
+  }

packages/players/quml/demoData.js

@@ -246,6 +246,7 @@ const sectionContent = {
   },
   pkgVersion: 1,
 };
+
 let metadata = window.name ? JSON.parse(window.name) : sectionContent;
 const playerConfig = {
   context: {