### Install as Project

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Clones the repository and installs dependencies locally. Use this for development or direct project integration.

```bash
git clone https://github.com/medialab/quinoa-presentation-player
cd quinoa-presentation-player
npm install
npm run build-storybook
```

--------------------------------

### Start Storybook

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Starts a Storybook instance for live component testing. Explore various implementation scenarios in the ./stories folder.

```bash
npm run storybook
```

--------------------------------

### Install as Dependency

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Installs the Quinoa Presentation Player module as a dependency using npm. This is the recommended way to include it in your project.

```bash
npm install --save https://github.com/medialab/quinoa-presentation-player
```

--------------------------------

### Start at a specific slide

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Use the beginAt prop to set the initial slide index. The index is 0-based.

```jsx
import React from 'react';
import PresentationPlayer from 'quinoa-presentation-player';

function PresentationWithDeepLink({ presentation }) {
  // Start at the third slide (index 2)
  const startIndex = 2;

  return (
    <PresentationPlayer
      presentation={presentation}
      beginAt={startIndex}
    />
  );
}

// Parse slide index from URL hash
function PresentationFromUrl({ presentation }) {
  const slideIndex = parseInt(window.location.hash.replace('#slide-', ''), 10) || 0;

  return (
    <PresentationPlayer
      presentation={presentation}
      beginAt={slideIndex}
    />
  );
}
```

--------------------------------

### Full Quinoa Presentation Player Integration Example

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Demonstrates a complete integration of the Quinoa Presentation Player within a React application. It includes state management for the current slide, handling presentation end, and managing URL hash for slide navigation.

```jsx
import React, { useState, useEffect } from 'react';
import PresentationPlayer from 'quinoa-presentation-player';

function FullFeaturedPresentation({ presentationData }) {
  const [currentSlide, setCurrentSlide] = useState(null);
  const [hasEnded, setHasEnded] = useState(false);

  // Parse initial slide from URL
  const getInitialSlide = () => {
    const hash = window.location.hash.replace('#', '');
    const index = presentationData.order.indexOf(hash);
    return index >= 0 ? index : 0;
  };

  const handleSlideChange = (slideId) => {
    setCurrentSlide(slideId);
    window.history.replaceState(null, '', `#${slideId}`);

    // Track progress
    const position = presentationData.order.indexOf(slideId);
    const progress = ((position + 1) / presentationData.order.length) * 100;
    console.log(`Progress: ${progress.toFixed(0)}%`);
  };

  const handleExit = (direction) => {
    if (direction === 'bottom') {
      setHasEnded(true);
      console.log('Presentation completed');
    }
  };

  const handleWheel = (event) => {
    // Prevent parent scroll when inside presentation
    event.stopPropagation();
  };

  return (
    <div className="presentation-wrapper">
      <PresentationPlayer
        presentation={presentationData}
        template="scroller"
        beginAt={getInitialSlide()}
        options={{ allowViewExploration: true }}
        onSlideChange={handleSlideChange}
        onExit={handleExit}
        onWheel={handleWheel}
        className="my-presentation"
        style={{ height: '100vh' }}
      />

      {hasEnded && (
        <div className="end-screen">
          <h2>Thank you for viewing!</h2>
          <button onClick={() => setHasEnded(false)}>
            Watch Again
          </button>
        </div>
      )}
    </div>
  );
}

export default FullFeaturedPresentation;
```

--------------------------------

### Define Visualization Types

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Examples of how to define map, timeline, network, and SVG visualization types within the Quinoa model.

```javascript
// Visualization type is specified in the visualization metadata
const mapVisualization = {
  "metadata": { "visualizationType": "map" },
  "viewParameters": {
    "cameraX": 48.82,          // Latitude center
    "cameraY": 2.27,           // Longitude center
    "cameraZoom": 14,          // Zoom level
    "tilesUrl": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
  }
};

const timelineVisualization = {
  "metadata": { "visualizationType": "timeline" },
  "viewParameters": {
    // Timeline-specific view parameters
  }
};

const networkVisualization = {
  "metadata": { "visualizationType": "network" },
  "viewParameters": {
    // Network graph view parameters
  }
};

const svgVisualization = {
  "metadata": { "visualizationType": "svg" },
  "viewParameters": {
    // SVG viewer parameters
  }
};
```

--------------------------------

### Define a Quinoa Presentation Document

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

A complete example of the Quinoa presentation JSON structure, including metadata, datasets, visualizations, slides, and settings.

```json
{
  "type": "quinoa-presentation",
  "id": "presentation-uuid",
  "metadata": {
    "title": "Historical Map Presentation",
    "description": "An interactive journey through historical events",
    "authors": ["Author Name"]
  },
  "datasets": {
    "dataset-uuid": {
      "metadata": {
        "format": "csv",
        "fileName": "events.csv",
        "title": "Historical Events",
        "description": "Data source description",
        "license": "CC-BY"
      },
      "rawData": "Period,Event,latitude,longitude\n1871,Battle,48.825,2.276\n1870,Treaty,48.816,2.267"
    }
  },
  "visualizations": {
    "vis-uuid": {
      "metadata": {
        "visualizationType": "map"
      },
      "datasets": ["dataset-uuid"],
      "data": {
        "main": [
          {
            "Period": "1871",
            "Event": "Battle",
            "geometry": { "type": "Point", "coordinates": [48.825, 2.276] }
          }
        ]
      },
      "dataMap": {
        "main": {
          "title": { "id": "title", "mappedField": "Event" },
          "category": { "id": "category", "mappedField": "Period" }
        }
      },
      "flattenedDataMap": {
        "main": { "title": "Event", "category": "Period" }
      },
      "colorsMap": {
        "default": "#d8d8d8",
        "main": { "1871": "#ffd1bf", "1870": "#16a400" }
      },
      "viewParameters": {
        "cameraX": 48.82,
        "cameraY": 2.27,
        "cameraZoom": 14,
        "tilesUrl": "http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png"
      }
    }
  },
  "slides": {
    "slide-1-uuid": {
      "id": "slide-1-uuid",
      "title": "Introduction",
      "markdown": "Welcome to this **interactive** presentation.",
      "views": {
        "vis-uuid": {
          "viewParameters": {
            "cameraX": 48.82,
            "cameraY": 2.27,
            "cameraZoom": 14,
            "colorsMap": { "main": { "1871": "#ffd1bf" } },
            "shownCategories": { "main": ["1871", "1870"] }
          }
        }
      }
    }
  },
  "order": ["slide-1-uuid"],
  "settings": {
    "template": "stepper",
    "css": ".custom-style { color: red; }"
  }
}
```

--------------------------------

### Build Storybook

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Initializes Storybook. This is a prerequisite for running Storybook.

```bash
npm run build-storybook
```

--------------------------------

### Build Component

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Builds the component into the ./build directory. Use this script for production builds.

```bash
npm run build
```

--------------------------------

### Basic Usage with Stepper Template

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Render a presentation using the default stepper template. Slides are navigated via buttons and arrow keys. The presentation object follows the Quinoa document model structure.

```jsx
import React from 'react';
import PresentationPlayer from 'quinoa-presentation-player';
import myPresentation from './my-presentation.json';

function App() {
  return (
    <PresentationPlayer
      presentation={myPresentation}
    />
  );
}

// The presentation object follows the Quinoa document model structure:
// {
//   "type": "quinoa-presentation",
//   "id": "unique-id",
//   "metadata": { "title": "My Presentation", "authors": ["Author Name"], "description": "..." },
//   "datasets": { ... },
//   "visualizations": { ... },
//   "slides": { ... },
//   "order": ["slide-id-1", "slide-id-2"],
//   "settings": { "template": "stepper" }
// }
```

--------------------------------

### Create Custom Template Info

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Define metadata for a custom presentation template using a JSON file. This includes the template's ID, name, and a brief description.

```json
{
  "id": "custom",
  "name": "Custom Template",
  "description": "A custom layout for presentations"
}
```

--------------------------------

### Import Presentation Player Component and Templates

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Import the main React player component and the templates object which contains metadata about available display templates.

```javascript
// Import the main player component
import PresentationPlayer from 'quinoa-presentation-player';

// Import template metadata
import { templates } from 'quinoa-presentation-player';

// templates is an array of template info objects:
// [
//   { "id": "stepper", "name": "Stepper", "description": "Slides are browsed through buttons" },
//   { "id": "scroller", "name": "Scroller", "description": "Slides are browsed through scrolling on the presentation" }
// ]
```

--------------------------------

### Presentation Settings Structure

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/quinoa-presentation-document-model-description.md

Defines the settings for a Quinoa presentation, including the template to use for display and any custom CSS to be injected.

```json
{
  "template": <String> // the template to use to display the presentation
  "css": <String> // custom css to inject when displaying the presentation
}
```

--------------------------------

### Apply custom styling

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Customize the player container using the className and style props.

```jsx
import React from 'react';
import PresentationPlayer from 'quinoa-presentation-player';
import './custom-presentation.css';

function StyledPresentation({ presentation }) {
  return (
    <PresentationPlayer
      presentation={presentation}
      className="my-custom-presentation"
      style={{
        width: '100%',
        height: '80vh',
        border: '1px solid #ccc'
      }}
    />
  );
}

// CSS classes applied: quinoa-presentation-player [template-name] [custom-class]
// Example result: class="quinoa-presentation-player stepper my-custom-presentation"
```

--------------------------------

### React Component API

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Details the properties and callbacks available for the QuinoaPresentationPlayer component.

```APIDOC
## React Component API

### Description
The main React component exported by the module for rendering data presentations.

### Parameters
#### Request Body (Props)
- **presentation** (object) - Required - The presentation data object.
- **options** (shape) - Optional - Global component configuration.
  - **allowViewExploration** (bool) - Optional - Enables panning/zooming/navigation within the view.
- **onSlideChange** (func) - Optional - Callback triggered when navigation changes.
- **onExit** (func) - Optional - Callback triggered on exit events (e.g., scrolling past bounds).
- **onWheel** (func) - Optional - Callback for transmitting wheel events upstream.
```

--------------------------------

### Import Presentation Templates Metadata

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Imports the 'templates' object, which provides metadata about available presentation display templates. Use this to understand template options.

```javascript
import {templates} from 'quinoa-presentation-player';
```

--------------------------------

### Define template metadata in info.json

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Metadata file defining the template's unique identifier, display name, and a brief description.

```json
{
  "id": "scroller",
  "name": "Scroller",
  "description": "Slides are browsed through scrolling on the presentation"
}
```

--------------------------------

### Add Build to Git

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Adds the build directory to the current Git record. Use this after a successful build.

```bash
npm run git-add-build
```

--------------------------------

### Import Presentation Player Component

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Imports the main React component for displaying presentations. This is the primary component to use in your application.

```javascript
import PresentationPlayer from 'quinoa-presentation-player';
```

--------------------------------

### Run Tests

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Runs Mocha tests on all *.spec.js files in the ./src directory. This is crucial for verifying component functionality.

```bash
npm run test
```

--------------------------------

### Visualization Structure

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/quinoa-presentation-document-model-description.md

Outlines the structure of a visualization component in a Quinoa presentation, covering its metadata, data mappings, datasets used, color schemes, and view parameters.

```json
{
  "metadata": {
    "visualizationType": <String> // the type of the visualization
  }, // 
  "data": <Object>, // map of data's collections (each collection is represented by an array of js objects)
  "dataMap": <Object>, // editable map of data collections' data maps (what data property to map to what visualization property)
  "flattenedDataMap": <Object>, // operationalizable map of data collections' data maps (what data property to map to what visualization property)
  "datasets": <Array<String>>, // array of visualization's datasets' id
  "colorsMap": <Object>, // map of visualization's collections maps
  "viewParameters": <Object>, // state of the visualizations
  "viewOptions": <Array<Object>> // editable options of the view
}
```

--------------------------------

### Control view exploration

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Toggle user interaction with visualizations using the allowViewExploration option within the options prop.

```jsx
import React from 'react';
import PresentationPlayer from 'quinoa-presentation-player';

function LockedPresentation({ presentation }) {
  // Disable panning, zooming, and navigation within visualizations
  return (
    <PresentationPlayer
      presentation={presentation}
      options={{ allowViewExploration: false }}
    />
  );
}

function InteractivePresentation({ presentation }) {
  // Allow users to pan/zoom visualizations (default behavior)
  return (
    <PresentationPlayer
      presentation={presentation}
      options={{ allowViewExploration: true }}
    />
  );
}
```

--------------------------------

### Prettify SCSS

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Prettifies SCSS code using the 'comb' tool. Ensure your SCSS files are formatted consistently.

```bash
npm run comb
```

--------------------------------

### Presentation Component PropTypes

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Defines the expected properties (props) for the Quinoa Presentation Player React component, including presentation data, options, and callbacks.

```javascript
QuinoaPresentationPlayer.propTypes = {
  /**
   * component must be given a presentation as prop
   * (see ./src/presentationModel.json and ./quinoa-presentation-document-model-description.md)
   */
  presentation: PropTypes.object.isRequired,
  /**
   * Component global options
   */
  options: PropTypes.shape({
    /**
     * declares whether users can pan/zoom/navigate inside the view
     * or if the view is strictly controlled by current slide's parameters
     */
    allowViewExploration: PropTypes.bool
  }),
  /**
   * callback when navigation is changed
   */
  onSlideChange: PropTypes.func,
  /**
   * callback when user triggers an exit event on the component 
   * (e.g. for scroller template : scroll down on last slide, scroll up on first slide)
   */
  onExit: PropTypes.func,
  /**
   * callback transmitting wheel events upstream
   */
  onWheel: PropTypes.func,
};
```

--------------------------------

### Custom React Presentation Layout Component

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Implement a custom layout component for Quinoa presentations using React. This component handles navigation and displays slide content, accepting various presentation-related props.

```javascript
import React from 'react';
import PropTypes from 'prop-types';
import './CustomLayout.scss';

const CustomLayout = ({
  presentation,
  currentSlide,
  activeViewsParameters,
  datasets,
  navigation,
  setCurrentSlide,
  stepSlide,
  toggleAside,
  gui,
  options,
  resetView,
  onUserViewChange,
  toggleInteractionMode,
  onExit
}) => {
  const next = () => stepSlide(true);
  const prev = () => stepSlide(false);

  return (
    <figure className="custom-wrapper">
      <div className="navigation">
        <button onClick={prev} disabled={navigation.firstSlide}>Previous</button>
        <span>{navigation.position + 1} / {presentation.order.length}</span>
        <button onClick={next} disabled={navigation.lastSlide}>Next</button>
      </div>
      <div className="content">
        {currentSlide && (
          <div>
            <h2>{currentSlide.title}</h2>
            <p>{currentSlide.markdown}</p>
          </div>
        )}
      </div>
    </figure>
  );
};

CustomLayout.propTypes = {
  presentation: PropTypes.object.isRequired,
  currentSlide: PropTypes.object,
  activeViewsParameters: PropTypes.object,
  datasets: PropTypes.object,
  navigation: PropTypes.shape({
    currentSlideId: PropTypes.string,
    position: PropTypes.number,
    firstSlide: PropTypes.bool,
    lastSlide: PropTypes.bool
  }),
  setCurrentSlide: PropTypes.func,
  stepSlide: PropTypes.func,
  toggleAside: PropTypes.func,
  gui: PropTypes.object,
  options: PropTypes.object,
  resetView: PropTypes.func,
  onUserViewChange: PropTypes.func,
  toggleInteractionMode: PropTypes.func,
  onExit: PropTypes.func
};

export default CustomLayout;
```

--------------------------------

### Dataset Structure

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/quinoa-presentation-document-model-description.md

Defines the structure of a dataset within a Quinoa presentation, including its metadata (format, file name, title, description, URL, license) and the raw data content.

```json
{
  "metadata": {
    "format": <String>, // data structure format (e.g. json, graphml, csv, ...)
    "fileName": <String>, // name of the file used to produce the dataset
    "title": <String>, // title of the dataset
    "description": <String>, // information about dataset
    "url": <String>, // information about dataset's url
    "license": <String> // information about dataset's license
  },
  "rawData": <String> // dataset as a raw string of characters
}
```

--------------------------------

### Presentation Metadata Structure

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/quinoa-presentation-document-model-description.md

Details the metadata associated with a Quinoa presentation, including authors, description, title, and source information like gist ID and URL.

```json
{
  "authors": <Array<String>>, // authors of the data
  "description": <String>, // description to be displayed
  "title": <String> // title to be displayed
  "gistId": <String> // gist id
  "gistUrl": <String> // gist url
  "server url": <String> // server url
}
```

--------------------------------

### Quinoa Presentation Structure

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/quinoa-presentation-document-model-description.md

Defines the top-level structure of a Quinoa presentation document, including its type, ID, metadata, datasets, visualizations, slides, order, and settings.

```json
{
  "type": "quinoa-presentation", // type identifier
  "id": <String>, // self identification
  "metadata": <Object>, // metadata of the whole presentation
  "datasets": <Object>, // map of the datasets used along the presentation (keys are uuids)
  "visualizations": <Object>, // map of the visualizations used in the presentation (keys are uuids)
  "slides": <Object>, // map of the slides used in the presentation (keys are uuids)
  "order": <Array>, // list of the slides to display in presentation
  "settings": <Object> // presentation's display settings
}
```

--------------------------------

### Using the Scroller Template

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Use the scroller template for navigation through scrolling. Slides appear as scrollable blocks. The template can be passed as a prop or set in the presentation's settings.

```jsx
import React from 'react';
import PresentationPlayer from 'quinoa-presentation-player';
import myPresentation from './my-presentation.json';

function App() {
  // Pass template as prop to override presentation settings
  return (
    <PresentationPlayer
      presentation={myPresentation}
      template="scroller"
    />
  );
}

// Alternatively, set template in the presentation settings:
// const presentationWithScroller = {
//   ...myPresentation,
//   settings: {
//     ...myPresentation.settings,
//     template: 'scroller'
//   }
// };
```

--------------------------------

### Handle wheel events

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Use the onWheel prop to forward wheel events to parent components, useful for embedding the player in scroll-aware pages.

```jsx
import React from 'react';
import PresentationPlayer from 'quinoa-presentation-player';

function ScrollAwarePresentation({ presentation }) {
  const handleWheel = (event) => {
    // Access wheel event data
    console.log('Wheel delta:', event.deltaY);

    // Coordinate with parent scroll container
    // Useful when embedding player in scroll-aware pages
  };

  return (
    <div className="scroll-container">
      <PresentationPlayer
        presentation={presentation}
        onWheel={handleWheel}
      />
    </div>
  );
}
```

--------------------------------

### Module Exports

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Describes the primary exports of the module including the component and template metadata.

```APIDOC
## Module Exports

### Description
The module provides a default export for the player component and a named export for template metadata.

### Usage
```js
import PresentationPlayer from 'quinoa-presentation-player';
import {templates} from 'quinoa-presentation-player';
```
```

--------------------------------

### Template React Component Interface

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

The React component for a template must implement the following PropTypes to handle presentation state, navigation, and user interaction.

```APIDOC
## React Component Interface

### Description
Defines the required props for a custom template component in the Quinoa Presentation Player.

### Parameters
- **presentation** (object) - Required - The presentation to display
- **currentSlide** (object) - Optional - The current slide being displayed
- **activeViewsParameters** (object) - Optional - Parameters describing current view's state
- **viewDifferentFromSlide** (bool) - Optional - Whether view parameters match slide parameters
- **datasets** (object) - Optional - Transformed datasets for visualizations
- **navigation** (shape) - Optional - Navigation state (currentSlideId, position, firstSlide, lastSlide)
- **setCurrentSlide** (func) - Optional - Callback to jump to a specific slide
- **stepSlide** (func) - Optional - Callback to step forward or backward
- **toggleAside** (func) - Optional - Callback to change aside display
- **gui** (shape) - Optional - Interface state (asideVisible, interactionMode)
- **options** (shape) - Optional - Global options (allowViewExploration)
- **resetView** (func) - Optional - Callback to reset view to slide parameters
- **onUserViewChange** (func) - Optional - Callback for manual view changes
- **toggleInteractionMode** (func) - Optional - Hook to switch between read/explore modes
- **onExit** (func) - Optional - Trigger to exit the presentation
```

--------------------------------

### Lint Code

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Lints the code according to settings in package.json. Auto-fixes are enabled.

```bash
npm run lint
```

--------------------------------

### Slide Structure

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/quinoa-presentation-document-model-description.md

Describes the structure of a single slide within a Quinoa presentation, including its views, title, markdown content, and unique identifier.

```json
{
  "views": { // map of the visualization's views (one or several) parameters
    "736e6287-205d-473e-ad95-26702310a025": {
      "viewParameters": {
        "paramX": <String|Number>, // visualizationType-specific params
        "colorsMap": <Object>, // colors map
        "dataMap": <Object>, // editable data map
        "flattenedDataMap": <Object>, // operationalized data map
        "shownCategories": <Object> // map of categories to be shown
      }
    }
  },
  "title": <String>, // title of the slide
  "markdown": <String>, // markdown contents
  "id": <String> // self-identification of the slide
}
```

--------------------------------

### Handling Slide Change Events

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Listen for navigation events when the active slide changes using the `onSlideChange` callback. This can be used for tracking analytics or updating the URL hash.

```jsx
import React, { useState } from 'react';
import PresentationPlayer from 'quinoa-presentation-player';

function PresentationContainer({ presentation }) {
  const [currentSlideId, setCurrentSlideId] = useState(null);

  const handleSlideChange = (slideId) => {
    console.log('Navigated to slide:', slideId);
    setCurrentSlideId(slideId);

    // Track analytics, update URL hash, etc.
    window.location.hash = slideId;
  };

  return (
    <div>
      <PresentationPlayer
        presentation={presentation}
        onSlideChange={handleSlideChange}
      />
      <p>Current slide: {currentSlideId}</p>
    </div>
  );
}
```

--------------------------------

### Handling Exit Events

Source: https://context7.com/medialab/quinoa-presentation-player/llms.txt

Detect when users attempt to exit the presentation, typically by scrolling past boundaries in scroller mode. The `onExit` callback receives the direction ('top' or 'bottom') of the exit.

```jsx
import React from 'react';
import PresentationPlayer from 'quinoa-presentation-player';

function EmbeddedPresentation({ presentation, onNavigateAway }) {
  const handleExit = (direction) => {
    // direction is either 'top' or 'bottom'
    console.log('User exited presentation from:', direction);

    if (direction === 'top') {
      // User scrolled up past the first slide
      onNavigateAway('previous-section');
    } else if (direction === 'bottom') {
      // User scrolled down past the last slide
      onNavigateAway('next-section');
    }
  };

  return (
    <PresentationPlayer
      presentation={presentation}
      template="scroller"
      onExit={handleExit}
    />
  );
}
```

--------------------------------

### Define React component propTypes

Source: https://github.com/medialab/quinoa-presentation-player/blob/master/README.md

Required propTypes interface for template components to handle presentation data, navigation state, and user interaction callbacks.

```js
MyTemplate.propTypes = {
  /**
   * The presentation to display
   */
  presentation: PropTypes.object.isRequired,
  /**
   * The current slide being displayed by the component
   */
  currentSlide: PropTypes.object,
  /**
   * Parameters describing current view's state
   */
  activeViewsParameters: PropTypes.object,
  /**
   * Whether the current view parameters match with current slide's view parameters
   */
  viewDifferentFromSlide: PropTypes.bool,
  /**
   * The transformed datasets to use for displaying visualizations
   */
  datasets: PropTypes.object,
  /**
   * Navigation state description
   */
  navigation: PropTypes.shape({
    /**
     * What is the active slide's id
     */
    currentSlideId: PropTypes.string,
    /**
     * What is the active slide's rank in slides list
     */
    position: PropTypes.number,
    /**
     * Whether active slide is the first
     */
    firstSlide: PropTypes.bool,
    /**
     * Whether active slide is the last
     */
    lastSlide: PropTypes.bool
        
  }),
  /**
   * Callbacks when user asks to jump to a specific slide
   */
  setCurrentSlide: PropTypes.func,
  /**
   * Callbacks when user asks to step forward or backward in slides order
   */
  stepSlide: PropTypes.func,
  /**
   * Callbacks to change the display of presentation's metadata/details in aside
   */
  toggleAside: PropTypes.func,
  /**
   * Interface state description
   */
  gui: PropTypes.shape({
    /**
     * Whether aside displays list of slides or presentation's metadata/details
     */
    asideVisible: PropType.bool,
    /**
     * Whether user is allowed to explore the view or can just navigate into slides' views
     */
    interactionMode: PropType.oneOf(["read", "explore"])
  }),
  /**
   * Component global options
   */
  options: PropTypes.shape({
    /**
     * declares whether users can pan/zoom/navigate inside the view
     * or if the view is strictly controlled by current slide's parameters
     */
    allowViewExploration: PropTypes.bool
  }),
  /**
   * Callbacks when user tries to reset view to current slide's view parameters
   */
  resetView: PropTypes.func,
  /**
   * Callbacks when user changes view manually
   */
  onUserViewChange: PropTypes.func,
  /**
   * Hook to switch between "read" and "explore" interaction modes
   */
  toggleInteractionMode: PropTypes.func,
  /**
   * Trigger to call when user interacts to exit the presentation
   */
  onExit: PropTypes.func
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.