Ndlano/issue#474 lydvelger som egen pakke

packages/ndla-audio-search/package.json

@@ -0,0 +1,47 @@
+{
+  "name": "ndla-audio-search",
+  "version": "0.1.1-0",
+  "description": "A simple library for searching for audio files from NDLA",
+  "license": "GPL-3.0",
+  "main": "lib/index.js",
+  "module": "es/index.js",
+  "jsnext:main": "es/index.js",
+  "scripts": {
+    "build": "npm run build:commonjs && npm run build:es",
+    "build:commonjs": "$(cd ..; npm bin)/cross-env BABEL_ENV=commonjs $(cd ..; npm bin)/babel src --out-dir lib --ignore __tests__",
+    "build:es": "$(cd ..; npm bin)/cross-env BABEL_ENV=es $(cd ..; npm bin)/babel src --out-dir es --ignore __tests__",
+    "clean": "$(cd ..; npm bin)/rimraf lib es",
+    "test": "$(cd ..; npm bin)/jest",
+    "prepublish": "npm run clean && npm run build"
+  },
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/NDLANO/frontend-packages.git/ndla-ui/"
+  },
+  "keywords": [
+    "ndla"
+  ],
+  "author": "[email protected]",
+  "files": [
+  ],
+  "devDependencies": {
+    "ndla-article-scripts": "^0.0.3",
+    "ndla-licenses": "^0.0.7",
+    "ndla-ui": "^0.4.3",
+    "ndla-util": "^0.1.3"
+  },
+  "peerDependencies": {
+    "classnames": "^2.2.5",
+    "ndla-article-scripts": "^0.0.3",
+    "ndla-licenses": "^0.0.7",
+    "ndla-ui": "^0.4.3",
+    "ndla-util": "^0.1.3",
+    "react": "^15.0.0",
+    "react-bem-helper": "^1.2.0",
+    "react-dom": "^15.0.0"
+  },
+  "dependencies": {
+    "defined": "1.0.0",
+    "react-bem-helper": "^1.2.0"
+  }
+}

packages/ndla-audio-search/src/AudioComponent.js

@@ -0,0 +1,66 @@
+/**
+ * Copyright (c) 2017-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import BEMHelper from 'react-bem-helper';
+import { Button } from 'ndla-ui';
+
+const classes = new BEMHelper({
+  name: 'audio-component',
+  prefix: 'c-',
+});
+
+class AudioComponent extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      audioSource: undefined,
+    };
+
+    this.loadAudio = this.loadAudio.bind(this);
+  }
+
+  loadAudio() {
+    this.props
+      .fetchAudio(this.props.audio.id)
+      .then(result => {
+        this.setState({
+          audioSource: (
+            <source
+              src={result.audioFile.url}
+              type={result.audioFile.mimeType}
+            />
+          ),
+        });
+      })
+      .catch(err => {
+        this.props.onError(err);
+      });
+  }
+
+  render() {
+    const { audioSource } = this.state;
+
+    return (
+      <div {...classes()}>
+        <audio autoPlay controls onPlay={!audioSource && this.loadAudio}>
+          {' '}{audioSource}
+        </audio>
+      </div>
+    );
+  }
+}
+
+AudioComponent.propTypes = {
+  audio: PropTypes.object.isRequired,
+  fetchAudio: PropTypes.func.isRequired,
+  onError: PropTypes.func.isRequired,
+};
+
+export default AudioComponent;

packages/ndla-audio-search/src/AudioSearch.js

@@ -0,0 +1,133 @@
+/**
+ * Copyright (c) 2017-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Pager } from 'ndla-ui';
+import BEMHelper from 'react-bem-helper';
+
+import AudioSearchForm from './AudioSearchForm';
+import AudioSearchResult from './AudioSearchResult';
+
+const classes = new BEMHelper({
+  name: 'audio-search',
+  prefix: 'c-',
+});
+
+class AudioSearch extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      queryObject: this.props.queryObject,
+      audios: [],
+      lastPage: 0,
+      totalCount: 0,
+      searching: false,
+    };
+
+    this.submitAudioSearchQuery = this.submitAudioSearchQuery.bind(this);
+    this.searchAudios = this.searchAudios.bind(this);
+  }
+
+  componentDidMount() {
+    this.searchAudios(this.state.queryObject);
+  }
+
+  submitAudioSearchQuery(queryObject) {
+    this.searchAudios({
+      query: queryObject.query,
+      page: 1,
+      pageSize: queryObject.pageSize,
+      locale: queryObject.locale,
+    });
+  }
+
+  searchAudios(queryObject) {
+    this.setState({ searching: true });
+    this.props
+      .searchAudios(queryObject)
+      .then(result => {
+        this.setState({
+          queryObject: {
+            query: queryObject.query,
+            page: queryObject.page,
+            pageSize: result.pageSize,
+            locale: queryObject.locale,
+          },
+          audios: result.results,
+          totalCount: result.totalCount,
+          lastPage: Math.ceil(result.totalCount / result.pageSize),
+          searching: false,
+        });
+      })
+      .catch(err => {
+        this.props.onError(err);
+        this.setState({ searching: false });
+      });
+  }
+
+  render() {
+    const {
+      searchPlaceholder,
+      searchButtonTitle,
+      fetchAudio,
+      onError,
+    } = this.props;
+
+    const { queryObject, audios, lastPage, searching } = this.state;
+
+    const { page, locale } = queryObject;
+
+    return (
+      <div {...classes()}>
+        <AudioSearchForm
+          onSearchQuerySubmit={this.submitAudioSearchQuery}
+          queryObject={queryObject}
+          searching={searching}
+          searchPlaceholder={searchPlaceholder}
+          searchButtonTitle={searchButtonTitle}
+        />
+        <div {...classes('list')}>
+          {audios.map(audio =>
+            <AudioSearchResult
+              key={audio.id}
+              audio={audio}
+              fetchAudio={fetchAudio}
+              onError={onError}
+              locale={locale}
+            />,
+          )}
+        </div>
+        <Pager
+          page={page ? parseInt(page, 10) : 1}
+          pathname=""
+          lastPage={lastPage}
+          query={queryObject}
+          onClick={this.searchAudios}
+          pageItemComponentClass="button"
+        />
+      </div>
+    );
+  }
+}
+
+AudioSearch.proptypes = {
+  queryObject: PropTypes.shape({
+    query: PropTypes.string,
+    page: PropTypes.number.isRequired,
+    pageSize: PropTypes.number.isRequired,
+    locale: PropTypes.string.isRequired,
+  }),
+  fetchAudio: PropTypes.func.isRequired,
+  searchAudios: PropTypes.func.isRequired,
+  onError: PropTypes.func.isRequired,
+  searchPlaceholder: PropTypes.string.isRequired,
+  searchButtonTitle: PropTypes.string.isRequired,
+};
+
+export default AudioSearch;

packages/ndla-audio-search/src/AudioSearchForm.js

@@ -0,0 +1,109 @@
+/**
+ * Copyright (c) 2017-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import React, { Component } from 'react';
+import PropTypes from 'prop-types';
+import { Button } from 'ndla-ui';
+import BEMHelper from 'react-bem-helper';
+
+const classes = new BEMHelper({
+  name: 'audio-search',
+  prefix: 'c-',
+});
+
+class AudioSearchForm extends Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      queryObject: props.queryObject,
+    };
+    this.onKeyPress = this.onKeyPress.bind(this);
+    this.handleQueryChange = this.handleQueryChange.bind(this);
+    this.handleSubmit = this.handleSubmit.bind(this);
+    this.handleLanguageChange = this.handleLanguageChange.bind(this);
+  }
+
+  onKeyPress(evt) {
+    if (evt.key === 'Enter') {
+      this.handleSubmit(evt);
+    }
+  }
+
+  handleLanguageChange(evt) {
+    let newQueryObject = {
+      query: this.state.queryObject.query,
+      page: this.state.queryObject.page,
+      pageSize: this.state.queryObject.pageSize,
+      locale: evt.target.value,
+    };
+
+    this.props.onSearchQuerySubmit(newQueryObject);
+    this.setState({ queryObject: newQueryObject });
+  }
+
+  handleQueryChange(evt) {
+    this.setState({
+      queryObject: {
+        query: evt.target.value,
+        page: this.state.queryObject.page,
+        pageSize: this.state.queryObject.pageSize,
+        locale: this.state.queryObject.locale,
+      },
+    });
+  }
+
+  handleSubmit(evt) {
+    evt.preventDefault();
+    this.props.onSearchQuerySubmit(this.state.queryObject);
+  }
+
+  render() {
+    const { searching, searchPlaceholder, searchButtonTitle } = this.props;
+
+    return (
+      <div {...classes('form')}>
+        <select onChange={this.handleLanguageChange}>
+          <option value="nb"> Norsk - Bokmål </option>
+          <option value="nn"> Norsk - Nynorsk </option>
+          <option value="en"> Engelsk </option>
+          <option value="unknown"> *Ukjent* </option>
+        </select>
+        <div>
+          <input
+            {...classes('form-query')}
+            type="text"
+            onChange={this.handleQueryChange}
+            onKeyPress={this.onKeyPress}
+            value={this.state.queryObject.query}
+            placeholder={searchPlaceholder}
+          />
+          <Button
+            {...classes('form-button')}
+            onClick={this.handleSubmit}
+            loading={searching}>
+            {searchButtonTitle}
+          </Button>
+        </div>
+      </div>
+    );
+  }
+}
+
+AudioSearchForm.propTypes = {
+  queryObject: PropTypes.object,
+  searching: PropTypes.bool.isRequired,
+  onSearchQuerySubmit: PropTypes.func.isRequired,
+  searchPlaceholder: PropTypes.string.isRequired,
+  searchButtonTitle: PropTypes.string.isRequired,
+};
+
+AudioSearchForm.defaultProps = {
+  query: '',
+};
+
+export default AudioSearchForm;