{"version":3,"file":"component---src-pages-videos-video-json-slug-js-e370f80fc23f03fd6562.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    html5: {\n      vhs: {\n        overrideNative: true,\n      },\n    },\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","responsive","fluid","sources","src","type","slug","poster","html5","vhs","overrideNative","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":""}