import {
  AutoLogoutService,
  createAutoLogoutService,
  createAutoLogoutServiceDescriptor
} from "@coremedia/studio-client.app-context-models";
import InputActivityTracker
  from "@coremedia/studio-client.app-context-models/activitytracker/InputActivityTracker";
import FetchActivityTracker
  from "@coremedia/studio-client.app-context-models/activitytracker/FetchActivityTracker";
...

async #setupAutoLogoutService(): Promise<void> {
  this.#autoLogoutService = createAutoLogoutService({
    autoLogoutDelay: 1800000,
    activityTrackers: [
      new InputActivityTracker(document.body),
      new FetchActivityTracker(),
    ],
    serviceAgent: getServiceAgent(),
  });
  getServiceAgent().registerService(
    this.#autoLogoutService,
    createAutoLogoutServiceDescriptor()
  );
  this.#autoLogoutSubscription = this.#autoLogoutService
    .observe_status()
    .subscribe(async (status) => {
      if (status === "loggedOut" || status === "autoLoggedOut") {
        await this.#doLogout();
        await this.tearDownAutoLogoutService();
      }
    });
}

Just as all apps should log out jointly, logging into one app should also reload the other apps that are currently opened in a browser window but do not have a valid session. The above mentioned StudioAppService offers a method for that. In the My-Edited-Contents App, this code is executed upon login:

const appServices = getServiceAgent().getServices(
  createStudioAppServiceDesc(), {state: "running"}
).filter(handler => handler.descriptor.provider !== getServiceAgent().getOrigin());
appServices.forEach(
  async (appServiceHandler) =>
    (await appServiceHandler.fetch()).reloadWithoutSession()
);

import { openOrFocusApp, studioApps }
  from "@coremedia/studio-client.app-context-models";

studioApps._.setWindowOpenHandler(openOrFocusApp);

import { observeWindowStudioAppsConnection, studioApps }
  from "@coremedia/studio-client.app-context-models";

      studioApps._.addWindowValidityObservable(
        observeWindowStudioAppsConnection()
      );

studioApps._.observeWindowValidity().subscribe((valid) => {
  if (!valid) {
    alert("This browser tab has no connection to the other Studio browser tabs. Please close it and continue in another Studio browser tab.");
  }
});

The property DragDropService#dataTransferItems mirrors the drag data of an HTML5 drag / drop event (DragEvent.dataTransfer.items). No matter whether the service data is used or the data from the drop event, they have the same structure. For example, for a typical drag operation of content items, the drag data looks like this:

{
  "cm-studio-rest/uri-list": "[\"content/3350\",\"content/3356\",\"content/3370\",\"content/3360\"]",
  "cm-content/uuid-list": "[\"14e56f5c-170a-43d6-8381-a9230f202040\",\"ca06b1ca-6d62-4040-a72b-3ff15b1f9dc8\",\"b5b54648-268b-41cb-91cd-1e1c805ae172\",\"66c1b819-1142-4480-9faa-0ed4d50a370c\"]",
  "cm-member/uuid-list": "[]",
}

Here it is visible that different flavors / types of drag data exist. The first two types are just different representations of the same content items. But it is visible that also member items (users and groups) might be dragged. The currently supported types are enumerated in DataTransferTypes of the module @coremedia/studio-client.interaction-services-api.

The following shows the drop handler of the My-Edited-Contents App to receive content items via a drag drop operation from the Content App.

onDrop={event => {
  const uriListData = event.dataTransfer.getData(DataTransferTypes.CM_STUDIO_REST_URI_LIST);
  if (!uriListData) {
    event.preventDefault();
    return;
  }
  const parsedUriList = JSON.parse(uriListData);
  if (!parsedUriList || !Array.isArray(parsedUriList)) {
    event.preventDefault();
    return;
  }
  const contentUriRestTemplate = new URITemplate(ContentImpl.REST_RESOURCE_URI_TEMPLATE);
  const contents = parsedUriList.filter((uri) =>
    contentUriRestTemplate.matches(uri)).map(beanFactory._.getRemoteBean);
  contents && contents.length > 0
    && session._.getConnection().getCapListRepository()
    .getEditedContents().addItems(contents);
}}

While custom apps can receive drops of content items from the built-in apps, there currently exists no further support to set up a drag operation from a custom app back to the built-in apps. However, it is possible if HTML5 drag / drop is used and the data is set up according to the above structure.

The clipboard reads and writes data in the form of ClipboardItems. These items support different flavors / types, analogous to the drag / drop data from above. For example, the My-Edited-Contents App has a global key handler to paste from the clipboard.

useEffect(() => {
  const onPaste = async (ev: KeyboardEvent) => {
    if (ev.key === "v" && (ev.ctrlKey || ev.metaKey)) {
      const clipboardItems = await clipboard._.read();
      const clipboardItem = clipboardItems.find((clipboardItem)
        => clipboardItem.types.includes(DataTransferTypes.CM_STUDIO_REST_URI_LIST));
      if (!clipboardItem) {
        return;
      }
      const restUrisItem = await clipboardItem
        .getType(DataTransferTypes.CM_STUDIO_REST_URI_LIST);
      const restUrisItemString = restUrisItem === "string"
        ? restUrisItem
        : await (restUrisItem as Blob).text();
      try {
        const restUris: Array<string> = JSON.parse(restUrisItemString);
        if (restUris) {
          const contents = restUris.map(beanFactory._
            .getRemoteBean).filter((bean) => is(bean, Content));

          contents
            && contents.length > 0
            && session._.getConnection().getCapListRepository()
              .getEditedContents().addItems(contents);
        }
      } catch (e) {
        // ignore
      }
    }
  };

  window.addEventListener("keyup", onPaste, false);

  return () => {
    window.removeEventListener("keyup", onPaste, false);
  };
}, []);

The My-Edited-Contents App also has a similar global key handler to copy into the clipboard, using the selection of the edited contents list.

const [selection, setSelection] = useState<GridSelectionModel>([]);

...

useEffect(() => {
  if (!selection || selection.length === 0) {
    return;
  }
  const onCopy = async (ev: KeyboardEvent) => {

    if (ev.key === "c" && (ev.ctrlKey || ev.metaKey)) {

      try {
        const data: Record<string, any> = {};
        const remoteBeans = selection
          .map(selected => beanFactory._.getRemoteBean(selected.toString()))
          .filter(Boolean);

        if (!remoteBeans.every(RemoteBeanUtil.isAccessible)) {
          return;
        }

        const restUriBlob = new Blob(
          [
            JSON.stringify(remoteBeans.map((remoteBean) => remoteBean.getUriPath())),
          ],
          {type: DataTransferTypes.CM_STUDIO_REST_URI_LIST},
        );
        data[restUriBlob.type] = restUriBlob;

        await clipboard._.write([new ClipboardItemImpl(data)]);

      } catch (e) {
        // ignore
      }
    }
  };

  window.addEventListener("keyup", onCopy, false);

  return () => {
    window.removeEventListener("keyup", onCopy, false);
  };
}, [selection]);