@sesamy/sesamy-js 1.2.0 → 1.3.1

package/src/app.ts

@@ -0,0 +1,101 @@
+import { User } from '@auth0/auth0-spa-js';
+import './style.css';
+import sesamyLogo from '/sesamy.png';
+import { Events } from './types/Events';
+
+/**
+ * This class is only used for rendering the UI and not shipped in the bundle
+ */
+
+class SesamyAppComponent extends HTMLElement {
+  private user: User | undefined;
+
+  constructor() {
+    super();
+  }
+
+  async _handleProfile() {
+    this.user = await window.sesamy.auth.getUser();
+    this.render();
+  }
+
+  async connectedCallback() {
+    this.setupEventListeners();
+
+    if (!window.sesamy) {
+      window.addEventListener(Events.READY, () => this._handleProfile());
+      return;
+    }
+
+    this._handleProfile();
+  }
+
+  render() {
+    this.innerHTML = `
+      <div>
+        <a href="https://docs.sesamy.com" target="_blank">
+          <img src="${sesamyLogo}" class="logo" alt="Vite logo" />
+        </a>    
+        <h1>Sesamy JS</h1>
+        <p class="read-the-docs">
+          Click on the Sesamy logo to learn more
+        </p>
+        ${this.user ? this.renderUserProfile() : this.renderLoginButton()}
+      </div>
+    `;
+  }
+
+  private renderLoginButton(): string {
+    return '<button part="login-btn" class="login auth-visible" id="login-btn"> Login </button>';
+  }
+
+  private renderUserProfile(): string {
+    return `<div class="user" part="user">
+      <a href="/profile" part="user-link">
+        ${
+          this.user?.picture
+            ? ` <img
+              class="big"
+              part="user-img img-big"
+              src=${this.user.picture}
+              alt=${this.user.name || 'User avatar'}
+            />`
+            : `<div part="avatar avatar-big" class="avatar big"> Placeholder </div>`
+        }
+        <h2 class="user-name">${this.user?.name || 'User Name'}</h2>
+      </a>
+
+      <div class="logout-wrap"> 
+        <a href="#" class="logout-btn" id="logout-btn"> Logout </a> 
+      </div> 
+      <div>
+        <a href="/entitlements.html">
+          View Entitlements
+        </a>
+      </div>
+      <div>
+        <a href="/contracts.html">
+          View Contracts
+        </a> 
+      </div> 
+    </div>`;
+  }
+
+  private setupEventListeners() {
+    this.addEventListener('click', event => {
+      const clickedElement = event.target as Element;
+      const logoutButton = clickedElement.closest('#logout-btn');
+      const loginButton = clickedElement.closest('#login-btn');
+
+      if (logoutButton) {
+        window.sesamy.auth.logout();
+      }
+
+      if (loginButton) {
+        window.sesamy.auth.loginWithRedirect();
+      }
+    });
+  }
+}
+
+customElements.define('sesamy-app', SesamyAppComponent);

package/src/constants.ts

@@ -0,0 +1,2 @@
+export const BASE_URL_DOMAIN = import.meta.env.VITE_BASE_URL_DOMAIN;
+export const ANALYTICS_BASE_URL = import.meta.env.VITE_ANALYTICS_BASE_URL;

package/src/controllers/index.ts

@@ -0,0 +1 @@
+// Will be stuff in here later

package/src/controllers/paywall.ts

@@ -0,0 +1,14 @@
+import { triggerEvent } from '../events/ready';
+import { accessArticle as accessArticleService } from '../services/sesamy';
+import { Events } from '../types/Events';
+
+export async function accessArticle(articleId: string) {
+  // Call the API to access the article
+  const response = await accessArticleService({ articleId });
+
+  if (response.status !== 'ok') {
+    triggerEvent(Events.SOFT_PAYWALL, {});
+  }
+
+  return response;
+}

package/src/entitlementsStyle.css

@@ -0,0 +1,147 @@
+.container {
+  background-color: var(--background, transparent);
+  font-family: var(--font-family, 'Helvetica');
+}
+ul {
+  list-style-type: none;
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--items-gap, 16px);
+  margin-top: 0;
+  padding: 0;
+}
+ul > * {
+  flex-grow: 1;
+  flex-shrink: 1;
+  flex-basis: var(--item-width, 300px);
+}
+button {
+  appearance: none;
+  display: inline-block;
+  text-decoration: none;
+  text-align: left;
+  background: none;
+  border: none;
+  width: 100%;
+  display: flex;
+  align-items: stretch;
+  text-decoration: none;
+  cursor: pointer;
+}
+button::-moz-focus-inner {
+  border: 0;
+  padding: 0;
+}
+button > * {
+  flex-shrink: 0;
+}
+.image-container {
+  padding-bottom: 14px;
+}
+img {
+  width: var(--image-size, 95px);
+  height: var(--image-size, 95px);
+  border-radius: var(--image-border-radius, 12px);
+  object-fit: cover;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+.details {
+  margin-left: var(--details-margin-left, 8px);
+  border-bottom-color: var(--divider-color, #70707023);
+  border-bottom-width: var(--divider-width, 1px);
+  padding-bottom: 14px;
+  border-bottom-style: solid;
+  display: flex;
+  flex-direction: column;
+  justify-content: var(--details-justify-content, space-between);
+  flex: 1;
+}
+p {
+  font-weight: normal;
+  margin: 0;
+  text-overflow: ellipsis;
+  overflow: hidden;
+  display: -webkit-box;
+  -webkit-box-orient: vertical;
+}
+.title {
+  color: var(--title-color, #131313);
+  font-size: 15px;
+  -webkit-line-clamp: 1;
+}
+.summary {
+  color: var(--summary-color, #22222260);
+  font-size: 12px;
+  -webkit-line-clamp: 2;
+}
+span {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+}
+span.type {
+  color: var(--type-color, #22222270);
+  text-transform: uppercase;
+  font-size: var(--type-font-size, 11px);
+  font-weight: medium;
+  margin-top: 4px;
+  font-family: var(--type-font-family, var(--font-family, 'Helvetica'));
+}
+span.date {
+  color: var(--date-color, #22222260);
+  font-size: var(--date-font-size, 12px);
+  font-weight: normal;
+  font-family: var(--date-font-family, var(--font-family, 'Helvetica'));
+}
+.modal {
+  display: none;
+  position: fixed;
+  z-index: var(--modal-zindex, 100);
+  padding-top: 20px;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: auto;
+}
+.modal-blackout {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background-color: rgba(0, 0, 0, 0.4);
+}
+
+.modal-container {
+  position: relative;
+  background-color: white;
+  margin: auto;
+  padding: 0;
+  max-width: 500px;
+  -webkit-animation-name: animatetop;
+  -webkit-animation-duration: 0.4s;
+  animation-name: animatetop;
+  animation-duration: 0.4s;
+}
+.close-container {
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  cursor: pointer;
+  z-index: 900;
+  width: auto;
+}
+@media only screen and (max-width: 768px) {
+  .modal {
+    padding: 10px 0;
+  }
+  .modal-container {
+    max-width: 100%;
+  }
+}

package/src/events/ready.ts

@@ -0,0 +1,12 @@
+import { Events } from '../types/Events';
+
+// TODO: Separate the event into a function per event so they can be typed
+export function triggerEvent(eventType: Events, payload: any) {
+  const customEvent = new CustomEvent(eventType, {
+    detail: payload,
+    bubbles: true,
+    composed: true,
+  });
+
+  dispatchEvent(customEvent);
+}

package/src/index.ts

@@ -0,0 +1,36 @@
+import { triggerEvent } from './events/ready';
+import { registerAPI } from './javascript-api';
+import { Config } from './types/Config';
+import { init as initAuth } from './services/auth';
+import { initAnalytics } from './services/analytics';
+import { Events } from './types/Events';
+
+export async function init(config: Config) {
+  initAnalytics({
+    clientId: config.clientId,
+    // The default client id can be overridden by the config
+    ...config.analytics,
+  });
+
+  // Auth needs to be initated after the analytics so that the auth events can be tracked
+  await initAuth(config);
+
+  const api = registerAPI(config.namespace);
+
+  triggerEvent(Events.READY, {});
+
+  return api;
+}
+
+// This is for checking if the script is being loaded in the browser
+if (typeof document !== 'undefined') {
+  const configElement = document.getElementById('sesamy-js');
+  if (configElement?.textContent) {
+    try {
+      const config = JSON.parse(configElement.textContent);
+      init(config);
+    } catch (err) {
+      console.error('Failed to parse config', err);
+    }
+  }
+}

package/src/javascript-api.ts

@@ -0,0 +1,84 @@
+import { loginWithRedirect, getUser, isAuthenticated, logout } from './services/auth';
+import {
+  getEntitlement,
+  getEntitlements,
+  getContract,
+  getContracts,
+  getBill,
+  getBills,
+  getTags,
+  setTag,
+  pushTag,
+} from './services/sesamy';
+import { accessArticle } from './controllers/paywall';
+import { version } from '../package.json';
+
+function getVersion() {
+  return version;
+}
+
+export interface SesamyApi {
+  articles: {
+    access: typeof accessArticle;
+  };
+  auth: {
+    getUser: typeof getUser;
+    isAuthenticated: typeof isAuthenticated;
+    loginWithRedirect: typeof loginWithRedirect;
+    logout: typeof logout;
+  };
+  tags: {
+    list: typeof getTags;
+    set: typeof setTag;
+    push: typeof pushTag;
+  };
+  getEntitlement: typeof getEntitlement;
+  getEntitlements: typeof getEntitlements;
+  getContract: typeof getContract;
+  getContracts: typeof getContracts;
+  getBill: typeof getBill;
+  getBills: typeof getBills;
+  getVersion: typeof getVersion;
+}
+
+interface SesamyWindow {
+  sesamy: SesamyApi;
+}
+
+// Extend the global Window type with your SesamyWindow interface
+declare global {
+  interface Window extends SesamyWindow {}
+}
+
+export function registerAPI(namespace: string | null = 'sesamy') {
+  const api: SesamyApi = {
+    auth: {
+      getUser,
+      isAuthenticated,
+      loginWithRedirect,
+      logout,
+    },
+    articles: {
+      access: accessArticle,
+    },
+    tags: {
+      list: getTags,
+      set: setTag,
+      push: pushTag,
+    },
+    getEntitlement,
+    getEntitlements,
+    getContract,
+    getContracts,
+    getBill,
+    getBills,
+    getVersion,
+  };
+
+  if (namespace !== null) {
+    // This makes it possible to use a different namespace
+    (window as any)[namespace] = api;
+  }
+
+  return api;
+}

package/src/services/analytics/element-tracker.ts

@@ -0,0 +1,117 @@
+/// <reference path="./types/analytics-activity-utils.d.ts" />
+import { onUserActivity } from '@analytics/activity-utils';
+
+// IDLE_TIME is in ms
+const timeout = 5000;
+
+export interface ElementTrackerOptions {
+  element: HTMLElement;
+  viewCallback?: () => void;
+  activeDurationCallback?: (duration: number) => void;
+  idleDurationCallback?: (duration: number) => void;
+}
+
+export default class ElementTracker {
+  element: HTMLElement;
+
+  isInViewport = false;
+
+  isAwake = false;
+
+  isFlushing?: boolean;
+
+  observer: IntersectionObserver;
+
+  lastEventAt = Date.now();
+
+  registeredView = false;
+
+  viewCallback?: () => void;
+
+  activeDurationCallback?: (duration: number, flushing?: boolean) => void;
+
+  idleDurationCallback?: (duration: number, flushing?: boolean) => void;
+
+  constructor(options: ElementTrackerOptions) {
+    this.element = options.element;
+    // We NEED to have callbacks here rather than using events as events will be lost when the browser is unloading
+    this.viewCallback = options.viewCallback;
+    this.activeDurationCallback = options.activeDurationCallback;
+    this.idleDurationCallback = options.idleDurationCallback;
+
+    // Setup the interaction observer
+    this.observer = new IntersectionObserver(
+      entries => {
+        // I guess there will only be one entry? Verify?
+        entries.forEach(entry => {
+          this.handleInViewPort(entry.isIntersecting);
+        });
+      },
+      {
+        threshold: 0,
+      },
+    );
+    this.observer.observe(this.element);
+
+    // Setup the active/idle
+    onUserActivity({
+      onIdle: (elapsedTime: number) => this.handleAwake(false, elapsedTime),
+      onWakeUp: (elapsedTime: number) => this.handleAwake(true, elapsedTime),
+      timeout,
+    });
+  }
+
+  /**
+   * Flush the awake timer in case the page is unloading
+   */
+  flush() {
+    this.isFlushing = true;
+    this.handleAwake(!this.isAwake, Math.round((Date.now() - this.lastEventAt) / 1000));
+  }
+
+  handleInViewPort(isInViewport: boolean) {
+    if (isInViewport) {
+      // A view envent only occurs if the element is active.
+      this.isAwake = true;
+      this.trackInViewport();
+    } else {
+      // An article outside the viewport is not active
+      this.handleAwake(false, Math.round((Date.now() - this.lastEventAt) / 1000));
+    }
+
+    this.isInViewport = isInViewport;
+  }
+
+  handleAwake(isAwake: boolean, elapsedTime: number) {
+    // Store the current awake state
+    this.isAwake = isAwake;
+    this.lastEventAt = isAwake ? Date.now() - elapsedTime * timeout : Date.now();
+
+    if (!this.isInViewport) {
+      return;
+    }
+    this.trackAwake(isAwake, elapsedTime);
+  }
+
+  trackAwake(awake: boolean, elapsedTime: number) {
+    if (!awake && this.activeDurationCallback) {
+      this.activeDurationCallback(elapsedTime, this.isFlushing);
+    }
+
+    if (awake && this.idleDurationCallback) {
+      this.idleDurationCallback(elapsedTime, this.isFlushing);
+    }
+  }
+
+  trackInViewport() {
+    if (this.registeredView) {
+      return;
+    }
+
+    this.registeredView = true;
+
+    if (this.viewCallback) {
+      this.viewCallback();
+    }
+  }
+}