Merge pull request #40 from line/appearances-for-mini

Appearances for MINI

Author: kazuma0129

src/qr-code.png renamed to public/assets/qr_liff.png

@@ -21,6 +21,11 @@ body {
   height: auto;
 }
 
+.applicationNotice {
+  color: #777777;
+  font-size: 15px;
+}
+
 @media only screen and (max-width: 375px) {
   .container {
     width: auto;

public/assets/qr_mini.png

@@ -1,33 +1,37 @@
-import React from 'react'
+import React, { useContext } from 'react'
 import liff from '@line/liff'
 import styles from './App.module.css'
 import Header from './components/Header'
 import Snippet from './components/Snippet'
 import Input from './components/Input'
-import { FilterContext, FilterType } from './Context'
-import qrCode from './qr-code.png'
-import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST } from './constants'
+import { SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST, QR_IMG_MAP } from './constants'
 import { FilterTypes } from './FilterTypes'
+import { AppContext } from './Context'
 
-type Props = {
-  appUrl: string
-  filter: FilterType
-}
+function App() {
+  const { appUrl, filter } = useContext(AppContext)
 
-function App({ appUrl, filter }: Props) {
   let isLoggedIn = false
   try {
     isLoggedIn = liff.isLoggedIn()
   } catch (e) {
     console.log(e)
   }
+
   return (
-    <FilterContext.Provider value={filter}>
+    <>
       <Header />
       <div className={styles.container}>
+        {filter === FilterTypes.MINI || filter === FilterTypes.MINI_PREVIEW ? (
+          <div className={styles.applicationNotice}>
+            本「LINEミニアプリプレイグラウンド」は日本限定のサービスです。
+            <br />
+            This “LINE MINI App Playground” is available only in Japan.
+          </div>
+        ) : null}
         <div className={styles.liffIdBox}>
           <Input readonly value={`URL: ${appUrl}`} />
-          <img src={qrCode} className={styles.qrCode} />
+          <img src={QR_IMG_MAP[filter]} className={styles.qrCode} />
         </div>
         <h1>Client APIs</h1>
         {!isLoggedIn ? (
@@ -226,7 +230,9 @@ function App({ appUrl, filter }: Props) {
           docUrl="https://developers.line.biz/en/reference/liff/#share-target-picker"
           needRequestPayload={true}
           hideResponse={true}
-          defaultRequestPayload={SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST[0].value}
+          defaultRequestPayload={
+            SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST[0].value
+          }
           pulldownOptions={SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST}
           skipAutoRun={true}
           runner={async (options) => {
@@ -308,7 +314,7 @@ function App({ appUrl, filter }: Props) {
               )}
               runner={async (payload) => {
                 const parsed = JSON.parse(payload)
-                await liff.createShortcutOnHomeScreen(parsed);
+                await liff.createShortcutOnHomeScreen(parsed)
               }}
               skipAutoRun={true}
               isInLIFF={false}
@@ -353,7 +359,7 @@ function App({ appUrl, filter }: Props) {
           </>
         )}
       </div>
-    </FilterContext.Provider>
+    </>
   )
 }
 

public/assets/qr_mini_preview.png

@@ -3,4 +3,12 @@ import { FilterTypes } from './FilterTypes'
 
 export type FilterType = keyof typeof FilterTypes
 
-export const FilterContext = React.createContext<FilterType>(FilterTypes.LIFF)
+export const AppContext = React.createContext<{
+  filter: FilterType,
+  appId: string,
+  appUrl: string
+}>({
+  filter: FilterTypes.LIFF,
+  appId: import.meta.env.VITE_LIFF_ID,
+  appUrl: `https://liff.line.me/${import.meta.env.VITE_LIFF_ID}`
+})

src/App.module.css

@@ -17,6 +17,10 @@
   align-items: center;
 }
 
+.left {
+  flex: 1;
+}
+
 .left a {
   text-decoration: none;
   color: #000;
@@ -41,4 +45,7 @@
   .gitHubButton {
     display: none;
   }
+  .right {
+    flex-basis: 100px;
+  }
 }

src/App.tsx

@@ -1,16 +1,22 @@
 import liff from '@line/liff'
-import React from 'react'
+import React, { useContext, useMemo } from 'react'
 import styles from './Header.module.css'
 import Button from './Button'
+import { AppContext } from '../Context'
 
 export default function Header() {
+  const {filter, appId} = useContext(AppContext);
+  const appName = useMemo(() => {
+    return filter === 'LIFF' ? 'LIFF Playground' : 'LINE MINI App Playground'
+  }, [filter])
+
   const openGitHub = () => {
     window.open(`https://github.com/line/liff-playground`, '_blank')
   }
 
   const openInApp = () => {
     window.open(
-      `https://line.me/R/app/${import.meta.env.VITE_LIFF_ID}`,
+      `https://line.me/R/app/${appId}`,
       '_blank'
     )
   }
@@ -20,7 +26,7 @@ export default function Header() {
       <div className={styles.header}>
         <div className={styles.left}>
           <a href='/'>
-            <h1>LIFF Playground</h1>
+            <h1>{appName}</h1>
           </a>
         </div>
         <div className={styles.right}>

src/Context.tsx

@@ -4,7 +4,7 @@ import Input from './Input'
 import styles from './Snippet.module.css'
 import Tag from './Tag'
 import TextArea from './TextArea'
-import { FilterContext } from '../Context'
+import { AppContext } from '../Context'
 import { FilterTypes } from '../FilterTypes'
 import Pulldown from './Pulldown'
 
@@ -74,8 +74,8 @@ export default function Snippet({
   }, [skipAutoRun, callRunner])
 
   return (
-    <FilterContext.Consumer>
-      {(filter) =>
+    <AppContext.Consumer>
+      {({ filter }) =>
         ((filter === FilterTypes.LIFF && isInLIFF) ||
           (filter === FilterTypes.MINI && isInMINI)) && (
           <div className={styles.snippet}>
@@ -154,6 +154,6 @@ export default function Snippet({
           </div>
         )
       }
-    </FilterContext.Consumer>
+    </AppContext.Consumer>
   )
 }

src/components/Header.module.css

@@ -1,4 +1,6 @@
-const base = new URL(location.href).origin;
+import { FilterTypes } from "./FilterTypes"
+
+const base = new URL(location.href).origin
 export const SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST = [
   {
     label: 'text',
@@ -54,3 +56,9 @@ export const SHARE_TARGET_PICKER_FIXED_ARGUMENT_LIST = [
   label,
   value: JSON.stringify(value, null, 4),
 }))
+
+export const QR_IMG_MAP = {
+  [FilterTypes.LIFF]: `${base}/assets/qr_liff.png`,
+  [FilterTypes.MINI]: `${base}/assets/qr_mini.png`,
+  [FilterTypes.MINI_PREVIEW]: `${base}/assets/qr_mini_preview.png`,
+}

src/components/Header.tsx

@@ -5,6 +5,7 @@ import { LiffCommonProfilePlugin } from '@line/liff-common-profile-plugin'
 import './main.css'
 import App from './App'
 import { FilterTypes } from './FilterTypes'
+import { AppContext } from './Context'
 
 const isMINI = new URLSearchParams(location.search).has('mini')
 const isPreviewMINI = new URLSearchParams(location.search).has('mini_preview')
@@ -39,7 +40,9 @@ liff
   .then(() => {
     ReactDOM.render(
       <React.StrictMode>
-        <App appUrl={appUrl} filter={filter} />
+        <AppContext.Provider value={{ filter, appId, appUrl }}>
+          <App />
+        </AppContext.Provider>
       </React.StrictMode>,
       document.getElementById('root')
     )