{"version":3,"file":"component---src-pages-videos-video-json-slug-js-3da56aafca4de7745b7f.js","mappings":"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","sources":["webpack://mch/./src/utils/api.js","webpack://mch/./src/components/video/protectedVideo.js","webpack://mch/./src/pages/videos/{VideoJson.slug}.js","webpack://mch/./node_modules/@babel/runtime/helpers/esm/asyncToGenerator.js"],"sourcesContent":["// https://github.com/AzureAD/microsoft-authentication-library-for-js/blob/dev/samples/msal-react-samples/gatsby-sample/src/utils/MsGraphApiCall.js\nexport const callApi = async (accessToken, url) => {\n  const headers = new Headers();\n  const bearer = `Bearer ${accessToken}`;\n\n  headers.append(\"Authorization\", bearer);\n\n  const options = {\n    method: \"GET\",\n    headers: headers,\n  };\n\n  return fetch(url, options);\n};\n","import React, { useState, useEffect } from \"react\";\nimport { callApi } from \"../../utils/api\";\nimport VideoJS from \"./video\";\nimport { apiRequest, cdn } from \"../../authConfig\";\nimport { Link } from \"gatsby\";\nimport { useLocation } from \"@reach/router\";\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\";\n\nconst ProtectedVideo = ({ videoJson, accessToken }) => {\n  const location = useLocation();\n  const cdnUrl =\n    location.hostname === \"www.mizuno-ch.cn\" ? cdn.url_cn : cdn.url;\n\n  // https://docs.videojs.com/tutorial-react.html\n  const playerRef = React.useRef(null);\n  const videoJsOptions = {\n    // lookup the options in the docs for more options\n    autoplay: false,\n    controls: true,\n    playbackRates: [0.5, 1, 1.5, 2],\n    responsive: true,\n    fluid: true,\n    sources: [\n      {\n        src:\n          cdnUrl + `/${videoJson.type}/videos/${videoJson.slug}/playlist.m3u8`,\n        type: \"application/x-mpegURL\",\n      },\n    ],\n    poster: cdnUrl + `/public/thumbnails/${videoJson.slug}.webp`,\n  };\n  const handlePlayerReady = (player) => {\n    playerRef.current = player;\n\n    // you can handle player events here\n    player.on(\"waiting\", () => {\n      console.log(\"player is waiting\");\n    });\n\n    player.on(\"dispose\", () => {\n      console.log(\"player will dispose\");\n    });\n  };\n\n  // Call api\n  const [apiData, setApiData] = useState(null);\n  const url = new URL(apiRequest.url);\n\n  useEffect(() => {\n    if (accessToken) {\n      callApi(accessToken, url + `?type=${videoJson.type}`)\n        .then((response) => response.json())\n        .then((data) => {\n          setApiData(data);\n        })\n        .catch((error) => console.log(error));\n    }\n  }, [accessToken]);\n\n  if (apiData) {\n    return apiData.purchased === true ? (\n      <>\n        <VideoJS\n          options={videoJsOptions}\n          onReady={handlePlayerReady}\n          sas={apiData.sas}\n          videoJson={videoJson}\n        />\n        {videoJson.series !== \"katari\" && videoJson.series !== \"taidan\" ? (\n          <div className=\"flex justify-center\">\n            <a\n              href={\n                cdnUrl +\n                `/${videoJson.type}/docs/${videoJson.slug}.pdf` +\n                apiData.sas\n              }\n              download\n              target=\"_blank\"\n              rel=\"noreferrer\"\n              className=\"inline-block px-5 md:px-10 py-2 md:py-3 bg-cyan-800 hover:bg-cyan-700 text-white rounded-md mt-5 text-center font-sans tracking-wider\"\n            >\n              レジュメPDFダウンロード\n            </a>\n          </div>\n        ) : null}\n      </>\n    ) : (\n      <div className=\"relative\">\n        {/* <img\n          src={cdnUrl + `/public/thumbnails/${videoJson.slug}.png`}\n          alt={videoJson.title}\n        /> */}\n        <GatsbyImage image={getImage(videoJson.image)} alt={videoJson.slug} />\n        <div className=\"absolute top-0 left-0 w-full h-full flex justify-center items-center\">\n          <div className=\"text-white text-sm md:text-lg text-center bg-gray-900 bg-opacity-80 p-3 md:p-10\">\n            この動画はオプション会員様限定です。\n            <br />\n            オプションのお申し込みは弊社担当者または\n            <Link to=\"/contact\" className=\"text-cyan-500 hover:text-cyan-400\">\n              お問い合わせ\n            </Link>\n            よりお願いいたします。\n          </div>\n        </div>\n      </div>\n    );\n  } else {\n    return (\n      <div className=\"w-full aspect-video flex items-center justify-center\">\n        <div className=\"animate-spin h-10 w-10 border-4 border-cyan-500 rounded-full border-t-transparent\"></div>\n      </div>\n    );\n  }\n};\n\nexport default ProtectedVideo;\n","import React, { useState, useEffect } from \"react\";\nimport { graphql, Link } from \"gatsby\";\nimport Layout from \"../../components/layout\";\nimport {\n  useMsal,\n  AuthenticatedTemplate,\n  useIsAuthenticated,\n  UnauthenticatedTemplate,\n} from \"@azure/msal-react\";\nimport {\n  InteractionRequiredAuthError,\n  InteractionStatus,\n} from \"@azure/msal-browser\";\nimport ProtectedVideo from \"../../components/video/protectedVideo\";\nimport { apiRequest } from \"../../authConfig\";\nimport { ChevronRightIcon } from \"@heroicons/react/solid\";\nimport FreeVideo from \"../../components/video/freeVideo\";\nimport Seo from \"../../components/seo\";\nimport { loginRequest } from \"../../authConfig\";\nimport { GatsbyImage, getImage } from \"gatsby-plugin-image\";\n\nconst VideoJson = (props) => {\n  const { videoJson } = props.data;\n\n  const { instance, accounts, inProgress } = useMsal();\n  const isAuthenticated = useIsAuthenticated();\n  const [accessToken, setAccessToken] = useState(null);\n\n  useEffect(() => {\n    if (isAuthenticated) {\n      if (inProgress === InteractionStatus.None) {\n        const accessTokenRequest = {\n          scopes: apiRequest.scopes,\n          account: accounts[0],\n        };\n        instance\n          .acquireTokenSilent(accessTokenRequest)\n          .then((response) => setAccessToken(response.accessToken))\n\n          .catch((error) => {\n            if (error instanceof InteractionRequiredAuthError) {\n              instance\n                .acquireTokenPopup(accessTokenRequest)\n                .then((response) => setAccessToken(response.accessToken))\n                .catch((error) => console.log(error));\n            }\n            console.log(error);\n          });\n      }\n    }\n  }, [instance, accounts, inProgress, isAuthenticated]);\n\n  return (\n    <Layout>\n      <Seo title={videoJson.title} />\n      <main>\n        <div className=\"bg-gray-100 text-gray-600\">\n          <nav className=\"container mx-auto p-1 md:p-3 font-sans\">\n            <ol className=\"list-reset flex items-center text-sm\">\n              <li>\n                <Link to=\"/\" className=\"text-blue-600 hover:text-blue-700\">\n                  ホーム\n                </Link>\n              </li>\n              <li className=\"mx-1\">\n                <ChevronRightIcon className=\"w-4 h-4\" />\n              </li>\n              <li>\n                <Link\n                  to=\"/videos\"\n                  className=\"text-blue-600 hover:text-blue-700\"\n                >\n                  中国ビジネス解説動画\n                </Link>\n              </li>\n              <li className=\"mx-1\">\n                <ChevronRightIcon className=\"w-4 h-4\" />\n              </li>\n              <li>\n                {videoJson.title.length > 11\n                  ? videoJson.title.substring(0, 10) + \"...\"\n                  : videoJson.title}\n              </li>\n            </ol>\n          </nav>\n        </div>\n        <div className=\"container mx-auto max-w-5xl px-5 md:px-10 py-10 md:py-20\">\n          {videoJson.type === \"free\" ? (\n            <FreeVideo videoJson={videoJson} withDoc={true} />\n          ) : (\n            <>\n              <AuthenticatedTemplate>\n                <ProtectedVideo\n                  videoJson={videoJson}\n                  accessToken={accessToken}\n                />\n              </AuthenticatedTemplate>\n              <UnauthenticatedTemplate>\n                <div className=\"relative\">\n                  <GatsbyImage\n                    image={getImage(videoJson.image)}\n                    alt={videoJson.slug}\n                  />\n                  <div className=\"absolute top-0 left-0 w-full h-full flex justify-center items-center\">\n                    <div className=\"text-white text-sm md:text-lg text-center bg-gray-900 bg-opacity-80 p-3 md:p-10\">\n                      <div className=\"mb-3\">\n                        この動画は{videoJson.type === \"option\" && \"オプション\"}\n                        会員様限定です。\n                        <br />\n                        会員のお申し込み、コンサルティングのご相談は\n                        <Link\n                          to=\"/contact\"\n                          className=\"text-cyan-500 hover:text-cyan-400\"\n                        >\n                          お問い合わせ\n                        </Link>\n                        よりお願いいたします。\n                      </div>\n                      <div className=\"mb-3\">\n                        {videoJson.type === \"option\" && \"オプション\"}\n                        会員様はログインをお願いいたします。\n                      </div>\n                      <div className=\"inline-flex justify-center\">\n                        <button\n                          className=\"border rounded-sm md:px-4 md:py-2 px-2 py-1 font-medium border-cyan-500 bg-cyan-50 hover:bg-cyan-100 text-gray-900\"\n                          onClick={() => instance.loginPopup(loginRequest)}\n                        >\n                          会員ログイン\n                        </button>\n                      </div>\n                    </div>\n                  </div>\n                </div>\n              </UnauthenticatedTemplate>\n            </>\n          )}\n          <div className=\"font-sans mt-5\">\n            <h1 className=\"md:text-2xl text-lg font-medium mb-3\">\n              {videoJson.title}\n            </h1>\n            <div className=\"text-sm mb-3\">\n              {videoJson.created}\n              {videoJson.category ? \" | \" + videoJson.category : null}\n            </div>\n            <div>{videoJson.description}</div>\n          </div>\n        </div>\n      </main>\n    </Layout>\n  );\n};\n\nexport default VideoJson;\n\nexport const query = graphql`\n  query ($id: String) {\n    videoJson(id: { eq: $id }) {\n      id\n      category\n      created\n      description\n      no\n      slug\n      series\n      title\n      type\n      image {\n        childImageSharp {\n          gatsbyImageData\n        }\n      }\n    }\n  }\n`;\n","function asyncGeneratorStep(gen, resolve, reject, _next, _throw, key, arg) {\n  try {\n    var info = gen[key](arg);\n    var value = info.value;\n  } catch (error) {\n    reject(error);\n    return;\n  }\n\n  if (info.done) {\n    resolve(value);\n  } else {\n    Promise.resolve(value).then(_next, _throw);\n  }\n}\n\nexport default function _asyncToGenerator(fn) {\n  return function () {\n    var self = this,\n        args = arguments;\n    return new Promise(function (resolve, reject) {\n      var gen = fn.apply(self, args);\n\n      function _next(value) {\n        asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"next\", value);\n      }\n\n      function _throw(err) {\n        asyncGeneratorStep(gen, resolve, reject, _next, _throw, \"throw\", err);\n      }\n\n      _next(undefined);\n    });\n  };\n}"],"names":["callApi","accessToken","url","headers","Headers","bearer","append","options","method","fetch","videoJson","cdnUrl","useLocation","hostname","cdn","playerRef","React","videoJsOptions","autoplay","controls","playbackRates","responsive","fluid","sources","src","type","slug","poster","useState","apiData","setApiData","URL","apiRequest","useEffect","then","response","json","data","catch","error","console","log","purchased","onReady","player","current","on","sas","series","className","href","download","target","rel","G","image","getImage","alt","Link","to","props","useMsal","instance","accounts","inProgress","isAuthenticated","useIsAuthenticated","setAccessToken","InteractionStatus","accessTokenRequest","scopes","account","acquireTokenSilent","InteractionRequiredAuthError","acquireTokenPopup","title","length","substring","withDoc","onClick","loginPopup","loginRequest","created","category","description","asyncGeneratorStep","gen","resolve","reject","_next","_throw","key","arg","info","value","done","Promise","_asyncToGenerator","fn","self","this","args","arguments","apply","err","undefined"],"sourceRoot":""}