@story-telling-reporter/react-scroll-to-audio/lib/hint.js

## Create Embed Code See [@story-telling-reporter/react-embed-code-generator](https://github.com/nickhsine/story-telling-reporter/blob/main/packages/embed-code-generator/README.md) for more information.

"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
exports.Hint = Hint;
var _react = _interopRequireWildcard(require("react"));
var _styledComponents = _interopRequireDefault(require("./styled-components"));
var _icons = require("./icons");
var _mediaQuery = require("./utils/media-query");
var _hooks = require("./hooks");
var _jsxRuntime = require("react/jsx-runtime");
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function (e) { return e ? t : r; })(e); }
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != typeof e && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
function Hint({
  className,
  id
}) {
  const [muted, setMuted] = (0, _hooks.useMuted)(true);
  const containerRef = (0, _react.useRef)(null);
  (0, _react.useEffect)(() => {
    const hintContainer = containerRef.current;
    if (!hintContainer) {
      return;
    }

    // Subscribe `data-muted` attribute changes.
    const observer = new MutationObserver(mutaions => {
      mutaions.forEach(mutation => {
        if (mutation.type === 'attributes' && (mutation === null || mutation === void 0 ? void 0 : mutation.attributeName) === 'data-muted') {
          const dataMuted = hintContainer === null || hintContainer === void 0 ? void 0 : hintContainer.getAttribute('data-muted');
          setMuted(dataMuted === 'true');
        }
      });
    });
    observer.observe(hintContainer, {
      attributes: true
    });
    return () => {
      observer.disconnect();
    };
  }, []);
  return /*#__PURE__*/(0, _jsxRuntime.jsxs)(Container, {
    id: id,
    className: className,
    "data-muted": muted,
    ref: containerRef,
    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(HintText, {
      children: muted ? '本文含聲音敘事，開啟聲音以獲得完整閱讀體驗' : '已開啟本篇文章的聲音'
    }), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Button, {
      className: muted ? 'dark' : 'light',
      onClick: () => {
        const otherMediaElements = document.querySelectorAll('audio[data-muted],video[data-muted]');
        otherMediaElements.forEach(ele => {
          ele.setAttribute('data-muted', (!muted).toString());
        });
        setMuted(!muted);
      },
      children: [muted ? /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: "\u958B\u555F\u8072\u97F3"
      }) : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
        children: "\u95DC\u9589\u8072\u97F3"
      }), muted ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SoundIcon, {}) : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.MuteIcon, {})]
    }), /*#__PURE__*/(0, _jsxRuntime.jsx)(SeparationLineContainer, {
      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SeparationLine, {})
    })]
  });
}
const Container = _styledComponents.default.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;

  margin-left: auto;
  margin-right: auto;

  /* mobile */
  width: calc(100vw - 68px);

  ${_mediaQuery.mediaQuery.tabletAbove} {
    padding-left: 24px;
    padding-right: 24px;
  }

  ${_mediaQuery.mediaQuery.tabletOnly} {
    width: 453px;
  }

  ${_mediaQuery.mediaQuery.desktopOnly} {
    width: 480px;
  }

  ${_mediaQuery.mediaQuery.hdOnly} {
    width: 580px;
  }
`;
const Button = _styledComponents.default.div`
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 4px;

  padding: 4px 12px;
  border-radius: 40px;

  cursor: pointer;

  > span {
    font-size: 14px;
    font-family: Noto Sans TC, Sans-Serif, serif;
    font-weight: 500;
    line-height: 21px;
  }

  > svg {
    width: 18px;
    height: 18px;
  }

  &.dark {
    background-color: #404040;
    color: #fff;

    svg {
      fill: #fff;
    }
  }

  &.light {
    background-color: #fff;
    color: #404040;

    svg {
      fill: #404040;
    }
  }

  /**
   * prevent sticky hover effects on touch devices
   * see: https://stackoverflow.com/questions/17233804/how-to-prevent-sticky-hover-effects-for-buttons-on-touch-devices
   **/
  @media (hover: hover) {
    &.dark:hover {
      background-color: #000;
    }

    &.light:hover {
      background-color: #e2e2e2;
    }
  }
`;
const HintText = _styledComponents.default.p`
  /* clear default margin */
  margin: 0;

  text-align: center;

  font-family: Noto Sans TC, Sans-Serif, serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 21px;
  letter-spacing: 0em;
  color: #808080;
`;
const SeparationLineContainer = _styledComponents.default.div`
  width: 192px;
  margin-top: 24px;

  ${_mediaQuery.mediaQuery.hdOnly} {
    width: 272px;
  }
`;