Progress

new MediaAttachment video style :playable for mp4 to make videojs work with multiple files, hiding albums, hiding bookmark collections. may need tweaks on mediaattachment for mov and other formats : todo :

app/javascript/gabsocial/components/album.js

@@ -21,13 +21,17 @@ class Album extends React.PureComponent {
 
   render() {
     const {
+      account,
       album,
       isAddable,
     } = this.props
-    
-    const title = isAddable ? 'New album' : 'Album title'
-    const subtitle = isAddable ? '' : '10 Items'
-    const to = isAddable ? undefined : `/photos`
+
+    if (!isAddable && (!album || !account)) return null
+
+    const title = isAddable ? 'New album' : album.get('title')
+    const subtitle = isAddable ? '' : `${album.get('count')} Items`
+    const to = isAddable ? undefined : `/${account.get('username')}/albums/${album.get('id')}`
+    const albumImageUrl = !!album ? album.getIn(['cover', 'preview_url'], null) : null
 
     return (
       <div className={[_s.d, _s.minW162PX, _s.px5, _s.flex1].join(' ')}>
@@ -40,8 +44,17 @@ class Album extends React.PureComponent {
           <div className={[_s.d, _s.w100PC, _s.mt5, _s.mb10].join(' ')}>
             <div className={[_s.d, _s.w100PC, _s.pt100PC].join(' ')}>
               <div className={[_s.d, _s.posAbs, _s.top0, _s.w100PC, _s.right0, _s.bottom0, _s.left0].join(' ')}>
-                <div className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter, _s.radiusSmall, _s.bgTertiary, _s.border1PX, _s.borderColorSecondary].join(' ')}>
+                <div className={[_s.d, _s.w100PC, _s.h100PC, _s.aiCenter, _s.jcCenter, _s.radiusSmall, _s.overflowHidden, _s.bgTertiary, _s.border1PX, _s.borderColorSecondary].join(' ')}>
                   { isAddable && <Icon id='add' size='20px' /> }
+                  {
+                    albumImageUrl &&
+                    <Image
+                      height='100%'
+                      width='100%'
+                      className={_s.z3}
+                      src={albumImageUrl}
+                    />
+                  }
                 </div>
               </div>
             </div>
@@ -58,14 +71,19 @@ class Album extends React.PureComponent {
 }
 
 Album.propTypes = {
+  account: ImmutablePropTypes.map,
   album: ImmutablePropTypes.map,
   isAddable: PropTypes.bool,
 }
 
+const mapStateToProps = (state, { albumId }) => ({
+  album: state.getIn(['albums', albumId]),
+})
+
 const mapDispatchToProps = (dispatch) => ({
   openAlbumCreate() {
     dispatch(openModal(MODAL_ALBUM_CREATE))
   }
 })
 
-export default connect(null, mapDispatchToProps)(Album)
+export default connect(mapStateToProps, mapDispatchToProps)(Album)

app/javascript/gabsocial/components/navigation_bar/profile_navigation_bar.js

@@ -23,9 +23,6 @@ class ProfileNavigationBar extends React.PureComponent {
 
   render() {
     const { titleHTML } = this.props
-
-    // : todo :
-    // fix padding on mobile device
     
     return (
       <div className={[_s.d, _s.z4, _s.minH53PX, _s.w100PC].join(' ')}>

app/javascript/gabsocial/components/panel/media_gallery_panel.js

@@ -55,7 +55,7 @@ class MediaGalleryPanel extends ImmutablePureComponent {
         noPadding
         title={intl.formatMessage(messages.title)}
         headerButtonTitle={!!account ? intl.formatMessage(messages.show_all) : undefined}
-        headerButtonTo={!!account ? `/${account.get('acct')}/albums` : undefined}
+        headerButtonTo={!!account ? `/${account.get('acct')}/photos` : undefined}
       > 
         <div className={[_s.d, _s.flexRow, _s.flexWrap, _s.aiCenter, _s.jcCenter].join(' ')}>
           {

app/javascript/gabsocial/components/popover/status_options_popover.js

@@ -19,7 +19,7 @@ import {
 import {
   muteAccount,
   unmuteAccount,
-} from '../../actions/interactions';
+} from '../../actions/accounts';
 import {
   deleteStatus,
   editStatus,
@@ -197,11 +197,12 @@ class StatusOptionsPopover extends ImmutablePureComponent {
       })
 
       if (status.get('bookmarked')) {
-        menu.push({
-          icon: 'bookmark',
-          title: 'Update bookmark collection',
-          onClick: this.handleBookmarkChangeClick,
-        })
+        // : todo :
+        // menu.push({
+        //   icon: 'bookmark',
+        //   title: 'Update bookmark collection',
+        //   onClick: this.handleBookmarkChangeClick,
+        // })
       }
 
       if (status.getIn(['account', 'id']) === me) {

app/javascript/gabsocial/components/profile_header.js

@@ -121,7 +121,7 @@ class ProfileHeader extends ImmutablePureComponent {
         title: intl.formatMessage(messages.comments),
       },
       {
-        to: `/${account.get('acct')}/albums`,
+        to: `/${account.get('acct')}/photos`,
         title: intl.formatMessage(messages.photos),
       },
       {
@@ -137,7 +137,7 @@ class ProfileHeader extends ImmutablePureComponent {
         title: 'Likes',
       })
       tabs.push({
-        to: `/${account.get('acct')}/bookmark_collections`,
+        to: `/${account.get('acct')}/bookmarks`,
         title: intl.formatMessage(messages.bookmarks),
       })
     }

app/javascript/gabsocial/components/status_check_box.js

@@ -32,6 +32,7 @@ class StatusCheckBox extends ImmutablePureComponent {
                 preview={video.get('preview_url')}
                 blurhash={video.get('blurhash')}
                 src={video.get('url')}
+                sourceMp4={video.get('source_mp4')}
                 alt={video.get('description')}
                 aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
                 fileContentType={video.get('file_content_type')}

app/javascript/gabsocial/components/status_media.js

@@ -65,6 +65,7 @@ class StatusMedia extends ImmutablePureComponent {
                 preview={video.get('preview_url')}
                 blurhash={video.get('blurhash')}
                 src={video.get('url')}
+                sourceMp4={video.get('source_mp4')}
                 alt={video.get('description')}
                 aspectRatio={video.getIn(['meta', 'small', 'aspect'])}
                 fileContentType={video.get('file_content_type')}

app/javascript/gabsocial/components/video.js

@@ -31,10 +31,16 @@ class Video extends ImmutablePureComponent {
   }
 
   componentDidMount() {
-    videoJsOptions.sources = [{
-      src: this.props.src,
-      type: this.props.fileContentType,
-    }]
+    videoJsOptions.sources = [
+      {
+        src: this.props.src,
+        type: this.props.fileContentType,
+      },
+      {
+        src: this.props.sourceMp4,
+        type: 'video/mp4',
+      },
+    ]
     this.videoPlayer = videojs(this.video, videoJsOptions)
   }
 
@@ -182,6 +188,7 @@ const messages = defineMessages({
 Video.propTypes = {
   preview: PropTypes.string,
   src: PropTypes.string.isRequired,
+  sourceMp4: PropTypes.string,
   alt: PropTypes.string,
   width: PropTypes.number,
   height: PropTypes.number,