wix-style-react/src/AudioPlayer/docs/AudioPlayer.examples.js

wix-style-react

export const _source = `
<AudioPlayer src="AudioTrack1.mp3" />;
`;

export const _preload = `
<StorybookComponents.Stack flexDirection="column">
  <AudioPlayer
    preload="auto"
    src="AudioTrack2.mp3"
  />
  <AudioPlayer
    preload="metadata"
    src="AudioTrack2.mp3"
  />
  <AudioPlayer
    preload="none"
    src="AudioTrack2.mp3"
  />
</StorybookComponents.Stack>;
`;

export const _form = `
<Card>
  <Card.Header title="Track info" />
  <Card.Divider />
  <Card.Content>
    <Layout>
      <Cell span={4}>
        <FormField label="Track cover">
          <ImageViewer
            addImageInfo="Add track cover. Recommended size 3000x3000px."
            height="214px"
            tooltipProps={{
              textAlign: 'center',
            }}
          />
        </FormField>
      </Cell>
      <Cell span={8}>
        <Box gap="24px" direction="vertical">
          <FormField
            label="Track File"
            suffix={
              <TextButton prefixIcon={<Icons.Refresh />}>
                Change File
              </TextButton>
            }
          >
            <AudioPlayer src="AudioTrack1.mp3" />
          </FormField>
          <FormField label="Track Name">
            <Input placeholder="Enter track name" />
          </FormField>
          <FormField label="Genre (pick up to 3)">
            <MultiSelect
              options={[
                { id: '1', value: 'Alternative' },
                { id: '2', value: 'Blues' },
                { id: '3', value: 'R&B/Soul' },
                { id: '4', value: 'Classical' },
                { id: '5', value: 'Country' },
                { id: '6', value: 'Dance' },
                { id: '7', value: 'Electronic' },
                { id: '8', value: 'Hip Hop' },
                { id: '9', value: 'Jazz' },
              ]}
              placeholder="Start typing to search the list"
            />
          </FormField>
        </Box>
      </Cell>
    </Layout>
  </Card.Content>
</Card>;
`;

export const _inbox = `
<Card>
  <Box verticalAlign="middle" align="space-between" padding="SP2 SP3">
    <Box gap="SP2" verticalAlign="middle">
      <Avatar name="Yarden Sayag" size="size30" />
      <Text>Yarden Sayag</Text>
    </Box>
    <Box gap="SP2">
      <IconButton skin="inverted">
        <Icons.More />
      </IconButton>
      <Button skin="inverted">Archive</Button>
    </Box>
  </Box>
  <Divider />
  <Card.Content>
    <Box
      border="1px solid"
      borderColor="D60"
      borderRadius={12}
      verticalAlign="middle"
      padding="3px SP2 3px SP1"
      width="fit-content"
      gap="6px"
      marginBottom="SP2"
    >
      <Icons.Phone />
      <Heading appearance="H6">Missed call 054-345-3453</Heading>
    </Box>
    <Box
      backgroundColor="D70"
      padding="SP3"
      borderRadius={12}
      width="45%"
      direction="vertical"
      gap="6px"
    >
      <Box marginBottom="SP2" direction="horizontal" verticalAlign="middle">
        <AudioPlayer src="AudioTrack1.mp3" />
        <Box marginLeft="18px">
          <IconButton size="medium" skin="inverted">
            <Icons.Download />
          </IconButton>
        </Box>
      </Box>
      <Text size="small">Message Transcript:</Text>
      <Text size="small">
        “Hey i know you are busy right now could you give me a call back whan
        you have a chance”
      </Text>
      <Box verticalAlign="middle" gap="6px" marginTop="SP1">
        <Icons.PhoneFilledSmall />
        <Text size="tiny">Voicemail</Text>
      </Box>
    </Box>
  </Card.Content>
</Card>;
`;