shakebug-react-native 2.4.9 → 2.4.11

package/android/src/main/java/com/shakebug/widgets/VideoTrimmerView.java

@@ -0,0 +1,520 @@
+package com.shakebug.widgets;
+
+import static com.shakebug.utils.VideoTrimmerUtil.RECYCLER_VIEW_PADDING;
+import static com.shakebug.utils.VideoTrimmerUtil.VIDEO_FRAMES_WIDTH;
+
+import android.animation.ValueAnimator;
+import android.app.Activity;
+import android.content.Context;
+import android.content.pm.ActivityInfo;
+import android.content.res.Configuration;
+import android.graphics.Bitmap;
+import android.media.MediaMetadataRetriever;
+import android.media.MediaPlayer;
+import android.net.Uri;
+import android.os.Handler;
+import android.util.AttributeSet;
+import android.view.LayoutInflater;
+import android.view.MotionEvent;
+import android.view.View;
+import android.view.ViewGroup;
+import android.view.animation.LinearInterpolator;
+import android.widget.FrameLayout;
+import android.widget.ImageView;
+import android.widget.LinearLayout;
+import android.widget.RelativeLayout;
+import android.widget.TextView;
+import android.widget.Toast;
+
+import androidx.recyclerview.widget.LinearLayoutManager;
+import androidx.recyclerview.widget.RecyclerView;
+
+import com.facebook.react.bridge.ReactApplicationContext;
+import com.facebook.react.bridge.ReadableMap;
+import com.shakebug.DeviceUtil;
+import com.shakebug.R;
+import com.shakebug.adapters.VideoTrimmerAdapter;
+import com.shakebug.interfaces.IVideoTrimmerView;
+import com.shakebug.interfaces.VideoTrimListener;
+import com.shakebug.thread.BackgroundExecutor;
+import com.shakebug.thread.UiThreadExecutor;
+import com.shakebug.utils.StorageUtil;
+import com.shakebug.utils.VideoTrimmerUtil;
+
+/**
+ * Author：J.Chou
+ * Date：  2016.08.01 2:23 PM
+ * Email： who_know_me@163.com
+ * Describe:
+ */
+public class VideoTrimmerView extends FrameLayout implements IVideoTrimmerView {
+
+  private static final String TAG = VideoTrimmerView.class.getSimpleName();
+
+  private int mMaxWidth = VIDEO_FRAMES_WIDTH;
+  private Context mContext;
+  private RelativeLayout mLinearVideo;
+  private ZVideoView mVideoView;
+  private ImageView mPlayView;
+  private RecyclerView mVideoThumbRecyclerView;
+  private RangeSeekBarView mRangeSeekBarView;
+  private LinearLayout mSeekBarLayout;
+  private ImageView mRedProgressIcon;
+  private float mAverageMsPx;//每毫秒所占的px
+  private float averagePxMs;//每px所占用的ms毫秒
+  private Uri mSourceUri;
+  private VideoTrimListener mOnTrimVideoListener;
+  private int mDuration = 0;
+  private VideoTrimmerAdapter mVideoThumbAdapter;
+  private boolean isFromRestore = false;
+  //new
+  private long mLeftProgressPos, mRightProgressPos;
+  private long mRedProgressBarPos = 0;
+  private long scrollPos = 0;
+  private int mScaledTouchSlop;
+  private int lastScrollX;
+  private boolean isSeeking;
+  private boolean isOverScaledTouchSlop;
+  private int mThumbsTotalCount;
+  private ValueAnimator mRedProgressAnimator;
+  private Handler mAnimationHandler = new Handler();
+  private Boolean mIsPrepared = false;
+  private int mMaxDuration = 0;
+
+  public VideoTrimmerView(Context context, AttributeSet attrs) {
+    this(context, attrs, 0, null);
+  }
+  public VideoTrimmerView(Context context, ReadableMap config, AttributeSet attrs) {
+    this(context, attrs, 0, config);
+  }
+
+  public VideoTrimmerView(Context context, AttributeSet attrs, int defStyleAttr, ReadableMap config) {
+    super(context, attrs, defStyleAttr);
+    init(context, config);
+  }
+
+  private Activity getActivity() {
+    if (mContext instanceof Activity) {
+      return (Activity) mContext;
+    }
+    if (mContext instanceof ReactApplicationContext) {
+      return ((ReactApplicationContext) mContext).getCurrentActivity();
+    }
+    return null;
+  }
+
+  private void init(Context context, ReadableMap config) {
+    this.mContext = context;
+
+    try {
+      Activity act = getActivity();
+      if (act != null) {
+        act.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_PORTRAIT);
+      }
+    } catch (Exception ignored) {}
+    LayoutInflater.from(context).inflate(R.layout.shakebug_video_trimmer_view, this, true);
+
+    mLinearVideo = findViewById(R.id.layout_surface_view);
+    mVideoView = findViewById(R.id.video_loader);
+    mPlayView = findViewById(R.id.icon_video_play);
+    mSeekBarLayout = findViewById(R.id.seekBarLayout);
+    mRedProgressIcon = findViewById(R.id.positionIcon);
+    mVideoThumbRecyclerView = findViewById(R.id.video_frames_recyclerView);
+    mVideoThumbRecyclerView.setLayoutManager(new LinearLayoutManager(mContext, LinearLayoutManager.HORIZONTAL, false));
+    mVideoThumbAdapter = new VideoTrimmerAdapter(mContext);
+    mVideoThumbRecyclerView.setAdapter(mVideoThumbAdapter);
+    mVideoThumbRecyclerView.addOnScrollListener(mOnScrollListener);
+
+    configure(config);
+    setUpListeners();
+  }
+
+  private void initRangeSeekBarView() {
+    if(mRangeSeekBarView != null) return;
+    mLeftProgressPos = 0;
+
+    VideoTrimmerUtil.SCREEN_WIDTH_FULL = this.getScreenWidthInPortraitMode();
+    VideoTrimmerUtil.VIDEO_FRAMES_WIDTH = VideoTrimmerUtil.SCREEN_WIDTH_FULL - RECYCLER_VIEW_PADDING * 2;
+    VideoTrimmerUtil.MAX_COUNT_RANGE = Math.max(((int) VIDEO_FRAMES_WIDTH / VideoTrimmerUtil.mThumbWidth),  VideoTrimmerUtil.MAX_COUNT_RANGE);
+
+    if (mDuration <= VideoTrimmerUtil.maxShootDuration) {
+      mThumbsTotalCount = VideoTrimmerUtil.MAX_COUNT_RANGE;
+      mRightProgressPos = mDuration;
+    } else {
+      mThumbsTotalCount = (int) (mDuration * 1.0f / (VideoTrimmerUtil.maxShootDuration * 1.0f) * VideoTrimmerUtil.MAX_COUNT_RANGE);
+      mRightProgressPos = VideoTrimmerUtil.maxShootDuration;
+    }
+
+    mVideoThumbRecyclerView.addItemDecoration(new SpacesItemDecoration2(RECYCLER_VIEW_PADDING, mThumbsTotalCount));
+    mRangeSeekBarView = new RangeSeekBarView(mContext, mLeftProgressPos, mRightProgressPos);
+    mRangeSeekBarView.setSelectedMinValue(mLeftProgressPos);
+    mRangeSeekBarView.setSelectedMaxValue(mRightProgressPos);
+    mRangeSeekBarView.setStartEndTime(mLeftProgressPos, mRightProgressPos);
+    mRangeSeekBarView.setMinShootTime(VideoTrimmerUtil.MIN_SHOOT_DURATION);
+    mRangeSeekBarView.setNotifyWhileDragging(true);
+    mRangeSeekBarView.setOnRangeSeekBarChangeListener(mOnRangeSeekBarChangeListener);
+    mSeekBarLayout.addView(mRangeSeekBarView);
+    if(mThumbsTotalCount - VideoTrimmerUtil.MAX_COUNT_RANGE > 0) {
+      mAverageMsPx = (mDuration - VideoTrimmerUtil.maxShootDuration) / (float) (mThumbsTotalCount - VideoTrimmerUtil.MAX_COUNT_RANGE);
+    } else {
+      mAverageMsPx = 0f;
+    }
+    averagePxMs = (mMaxWidth * 1.0f / (mRightProgressPos - mLeftProgressPos));
+  }
+
+  public void initVideoByURI(final Uri videoURI) {
+    mSourceUri = videoURI;
+    mVideoView.setVideoURI(videoURI);
+    mVideoView.requestFocus();
+  }
+
+  private void startShootVideoThumbs(final Context context, final Uri videoUri, int totalThumbsCount, long startPosition, long endPosition) {
+    VideoTrimmerUtil.shootVideoThumbInBackground(context, videoUri, totalThumbsCount, startPosition, endPosition,
+            (bitmap, interval) -> {
+              if (bitmap != null) {
+                UiThreadExecutor.runTask("", () -> mVideoThumbAdapter.addBitmaps(bitmap), 0L);
+              }
+            });
+  }
+
+  private void videoPrepared(MediaPlayer mp) {
+    ViewGroup.LayoutParams lp = mVideoView.getLayoutParams();
+    int videoWidth = mp.getVideoWidth();
+    int videoHeight = mp.getVideoHeight();
+    int screenWidth = mLinearVideo.getWidth();
+    int screenHeight = mLinearVideo.getHeight();
+
+    if (screenWidth > 0 && screenHeight > 0 && videoWidth > 0 && videoHeight > 0) {
+      float videoAspect = (float) videoWidth / videoHeight;
+      float screenAspect = (float) screenWidth / screenHeight;
+      if (videoAspect > screenAspect) {
+        lp.width = screenWidth;
+        lp.height = (int) (screenWidth / videoAspect);
+      } else {
+        lp.height = screenHeight;
+        lp.width = (int) (screenHeight * videoAspect);
+      }
+      mVideoView.setLayoutParams(lp);
+    } else {
+       mLinearVideo.post(() -> {
+         int w = mLinearVideo.getWidth();
+         int h = mLinearVideo.getHeight();
+         if (w > 0 && h > 0 && videoWidth > 0 && videoHeight > 0) {
+            float vAspect = (float) videoWidth / videoHeight;
+            float sAspect = (float) w / h;
+            if (vAspect > sAspect) {
+              lp.width = w;
+              lp.height = (int) (w / vAspect);
+            } else {
+              lp.height = h;
+              lp.width = (int) (h * vAspect);
+            }
+            mVideoView.setLayoutParams(lp);
+         }
+       });
+    }
+
+    mDuration = mVideoView.getDuration();
+
+    VideoTrimmerUtil.maxShootDuration = mMaxDuration > 0 ? Math.min(mMaxDuration * 1000L, mDuration) : mDuration;
+
+    MediaMetadataRetriever mediaMetadataRetriever = new MediaMetadataRetriever();
+    mediaMetadataRetriever.setDataSource(mContext, mSourceUri);
+    // take first frame
+    Bitmap bitmap = mediaMetadataRetriever.getFrameAtTime(0, MediaMetadataRetriever.OPTION_CLOSEST_SYNC);
+    int width = VideoTrimmerUtil.THUMB_HEIGHT * bitmap.getWidth() / bitmap.getHeight();
+    VideoTrimmerUtil.mThumbWidth = width;
+
+    if (!getRestoreState()) {
+      seekTo((int) mRedProgressBarPos);
+    } else {
+      setRestoreState(false);
+      seekTo((int) mRedProgressBarPos);
+    }
+    initRangeSeekBarView();
+    startShootVideoThumbs(mContext, mSourceUri, mThumbsTotalCount, 0, mDuration);
+  }
+
+  private void videoCompleted() {
+    seekTo(mLeftProgressPos);
+    setPlayPauseViewIcon(false);
+  }
+
+  private void onVideoReset() {
+    mVideoView.pause();
+    setPlayPauseViewIcon(false);
+  }
+
+  private void playVideoOrPause() {
+    mRedProgressBarPos = mVideoView.getCurrentPosition();
+    if (mVideoView.isPlaying()) {
+      mVideoView.pause();
+      pauseRedProgressAnimation();
+    } else {
+      mVideoView.start();
+      playingRedProgressAnimation();
+    }
+    setPlayPauseViewIcon(mVideoView.isPlaying());
+  }
+
+  public void onVideoPause() {
+    if (mVideoView.isPlaying()) {
+      seekTo(mLeftProgressPos);//复位
+      mVideoView.pause();
+      setPlayPauseViewIcon(false);
+      mRedProgressIcon.setVisibility(GONE);
+    }
+  }
+
+  public void setOnTrimVideoListener(VideoTrimListener onTrimVideoListener) {
+    mOnTrimVideoListener = onTrimVideoListener;
+  }
+
+  private void setUpListeners() {
+    findViewById(R.id.cancelBtn).setOnClickListener(view -> {
+      mOnTrimVideoListener.onCancel();
+    });
+
+    findViewById(R.id.saveBtn).setOnClickListener(view ->  {
+      mOnTrimVideoListener.onSave();
+    });
+
+    mVideoView.setOnPreparedListener(mp -> {
+      // this is called everytime activity goes active, and can fire multiple times
+      // so that we create a flag to not run below code more than once
+      if (mIsPrepared) {
+        return;
+      }
+      mp.setVideoScalingMode(MediaPlayer.VIDEO_SCALING_MODE_SCALE_TO_FIT);
+      videoPrepared(mp);
+      mIsPrepared = true;
+    });
+    mVideoView.setOnCompletionListener(mp -> {
+      videoCompleted();
+    });
+    mPlayView.setOnClickListener(view -> {
+      playVideoOrPause();
+    });
+  }
+
+  public void onSaveClicked() {
+    if (mRightProgressPos - mLeftProgressPos < VideoTrimmerUtil.MIN_SHOOT_DURATION) {
+      Toast.makeText(mContext, "Video shorter than 3s, can't proceed", Toast.LENGTH_SHORT).show();
+    } else {
+      mVideoView.pause();
+      VideoTrimmerUtil.trim(
+              mSourceUri.getPath(),
+              StorageUtil.getOutputPath(mContext),
+              mDuration,
+              mLeftProgressPos,
+              mRightProgressPos,
+              mOnTrimVideoListener);
+    }
+  }
+
+  private void seekTo(long msec) {
+    mVideoView.seekTo((int) msec);
+  }
+
+  private boolean getRestoreState() {
+    return isFromRestore;
+  }
+
+  public void setRestoreState(boolean fromRestore) {
+    isFromRestore = fromRestore;
+  }
+
+  private void setPlayPauseViewIcon(boolean isPlaying) {
+    mPlayView.setImageResource(isPlaying ? R.drawable.ic_video_pause_black : R.drawable.ic_video_play_black);
+  }
+
+  private final RangeSeekBarView.OnRangeSeekBarChangeListener mOnRangeSeekBarChangeListener = new RangeSeekBarView.OnRangeSeekBarChangeListener() {
+    @Override public void onRangeSeekBarValuesChanged(RangeSeekBarView bar, long minValue, long maxValue, int action, boolean isMin,
+                                                      RangeSeekBarView.Thumb pressedThumb) {
+      mLeftProgressPos = minValue + scrollPos;
+      mRedProgressBarPos = mLeftProgressPos;
+
+      // when dragging the highlighted section mRightProgressPos in some cases can bigger than mDuration
+      // Eg: mDuration=62006, then mRightProgressPos can be 63000
+      mRightProgressPos = Math.min(maxValue + scrollPos, mDuration);
+      switch (action) {
+        case MotionEvent.ACTION_DOWN:
+          isSeeking = false;
+          break;
+        case MotionEvent.ACTION_MOVE:
+          isSeeking = true;
+          seekTo((int) (pressedThumb == RangeSeekBarView.Thumb.MIN ? mLeftProgressPos : mRightProgressPos));
+          break;
+        case MotionEvent.ACTION_UP:
+          isSeeking = false;
+          seekTo((int) mLeftProgressPos);
+          break;
+        default:
+          break;
+      }
+
+
+      mRangeSeekBarView.setStartEndTime(mLeftProgressPos, mRightProgressPos);
+    }
+  };
+
+  private final RecyclerView.OnScrollListener mOnScrollListener = new RecyclerView.OnScrollListener() {
+    @Override
+    public void onScrollStateChanged(RecyclerView recyclerView, int newState) {
+      super.onScrollStateChanged(recyclerView, newState);
+    }
+
+    @Override
+    public void onScrolled(RecyclerView recyclerView, int dx, int dy) {
+      super.onScrolled(recyclerView, dx, dy);
+      isSeeking = false;
+      int scrollX = calcScrollXDistance();
+      //达不到滑动的距离
+      if (Math.abs(lastScrollX - scrollX) < mScaledTouchSlop) {
+        isOverScaledTouchSlop = false;
+        return;
+      }
+      isOverScaledTouchSlop = true;
+      //初始状态,why ? 因为默认的时候有35dp的空白！
+      if (scrollX == -RECYCLER_VIEW_PADDING) {
+        scrollPos = 0;
+        mLeftProgressPos = mRangeSeekBarView.getSelectedMinValue() + scrollPos;
+
+        // when scrolling the highlighted section mRightProgressPos in some cases can bigger than mDuration
+        // Eg: mDuration=62006, then mRightProgressPos can be 63000
+        mRightProgressPos = Math.min(mRangeSeekBarView.getSelectedMaxValue() + scrollPos, mDuration);
+        mRedProgressBarPos = mLeftProgressPos;
+      } else {
+        isSeeking = true;
+        scrollPos = (long) (mAverageMsPx * (RECYCLER_VIEW_PADDING + scrollX) / VideoTrimmerUtil.mThumbWidth);
+        mLeftProgressPos = mRangeSeekBarView.getSelectedMinValue() + scrollPos;
+
+        // when scrolling the highlighted section mRightProgressPos in some cases can bigger than mDuration
+        // Eg: mDuration=62006, then mRightProgressPos can be 63000
+        mRightProgressPos = Math.min(mRangeSeekBarView.getSelectedMaxValue() + scrollPos, mDuration);
+        mRedProgressBarPos = mLeftProgressPos;
+        if (mVideoView.isPlaying()) {
+          mVideoView.pause();
+          setPlayPauseViewIcon(false);
+        }
+        mRedProgressIcon.setVisibility(GONE);
+        seekTo(mLeftProgressPos);
+
+        mRangeSeekBarView.setStartEndTime(mLeftProgressPos, mRightProgressPos);
+        mRangeSeekBarView.invalidate();
+      }
+
+      lastScrollX = scrollX;
+    }
+  };
+
+  /**
+   * 水平滑动了多少px
+   */
+  private int calcScrollXDistance() {
+    LinearLayoutManager layoutManager = (LinearLayoutManager) mVideoThumbRecyclerView.getLayoutManager();
+    int position = layoutManager.findFirstVisibleItemPosition();
+    View firstVisibleChildView = layoutManager.findViewByPosition(position);
+    int itemWidth = firstVisibleChildView.getWidth();
+    return (position) * itemWidth - firstVisibleChildView.getLeft();
+  }
+
+  private void playingRedProgressAnimation() {
+    pauseRedProgressAnimation();
+    playingAnimation();
+    mAnimationHandler.post(mAnimationRunnable);
+  }
+
+  private void playingAnimation() {
+    if (mRedProgressIcon.getVisibility() == View.GONE) {
+      mRedProgressIcon.setVisibility(View.VISIBLE);
+    }
+    final LayoutParams params = (LayoutParams) mRedProgressIcon.getLayoutParams();
+    int start = (int) (RECYCLER_VIEW_PADDING + (mRedProgressBarPos - scrollPos) * averagePxMs);
+    int end = (int) (RECYCLER_VIEW_PADDING + (mRightProgressPos - scrollPos) * averagePxMs);
+    mRedProgressAnimator = ValueAnimator.ofInt(start, end).setDuration((mRightProgressPos - scrollPos) - (mRedProgressBarPos - scrollPos));
+    mRedProgressAnimator.setInterpolator(new LinearInterpolator());
+    mRedProgressAnimator.addUpdateListener(animation -> {
+      params.leftMargin = (int) animation.getAnimatedValue();
+      mRedProgressIcon.setLayoutParams(params);
+    });
+    mRedProgressAnimator.start();
+  }
+
+  private void pauseRedProgressAnimation() {
+    mRedProgressIcon.clearAnimation();
+    if (mRedProgressAnimator != null && mRedProgressAnimator.isRunning()) {
+      mAnimationHandler.removeCallbacks(mAnimationRunnable);
+      mRedProgressAnimator.cancel();
+    }
+  }
+
+  private Runnable mAnimationRunnable = () -> updateVideoProgress();
+
+  private void updateVideoProgress() {
+    long currentPosition = mVideoView.getCurrentPosition();
+    if (currentPosition >= (mRightProgressPos)) {
+      mRedProgressBarPos = mLeftProgressPos;
+      pauseRedProgressAnimation();
+      onVideoPause();
+    } else {
+      mAnimationHandler.post(mAnimationRunnable);
+    }
+  }
+
+  @Override
+  protected void onDetachedFromWindow() {
+    super.onDetachedFromWindow();
+    try {
+      Activity act = getActivity();
+      if (act != null) {
+        act.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
+      }
+    } catch (Exception ignored) {}
+  }
+
+  /**
+   * Cancel trim thread execute action when finish
+   */
+  @Override public void onDestroy() {
+    BackgroundExecutor.cancelAll("", true);
+    UiThreadExecutor.cancelAll("");
+    try {
+      Activity act = getActivity();
+      if (act != null) {
+        act.setRequestedOrientation(ActivityInfo.SCREEN_ORIENTATION_UNSPECIFIED);
+      }
+    } catch (Exception ignored) {}
+  }
+
+  private int getScreenWidthInPortraitMode() {
+    int screenWidth = DeviceUtil.getDeviceWidth();
+    int screenHeight = DeviceUtil.getDeviceHeight();
+
+    // Check the current orientation
+    int currentOrientation = getResources().getConfiguration().orientation;
+
+    // Swap width and height if the current orientation is landscape
+    if (currentOrientation == Configuration.ORIENTATION_LANDSCAPE) {
+      return screenHeight;
+    }
+
+    return screenWidth;
+  }
+
+  private void configure(ReadableMap config) {
+    if (config.hasKey("maxDuration")) {
+      this.mMaxDuration = config.getInt("maxDuration");
+    }
+
+    if (config.hasKey("cancelButtonText")) {
+      TextView tv = findViewById(R.id.cancelBtn);
+      tv.setText(config.getString("cancelButtonText"));
+    }
+
+    if (config.hasKey("saveButtonText")) {
+      TextView tv = findViewById(R.id.saveBtn);
+      tv.setText(config.getString("saveButtonText"));
+    }
+  }
+}

package/android/src/main/res/drawable/ic_volume_off.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="#FFFFFF">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M16.5,12c0,-1.77 -1.02,-3.29 -2.5,-4.03v2.21l2.45,2.45c0.04,-0.2 0.05,-0.41 0.05,-0.63zM19,12c0,0.94 -0.2,1.82 -0.54,2.64l1.51,1.51C20.63,14.91 21,13.5 21,12c0,-4.28 -2.99,-7.86 -7,-8.77v2.06c2.89,0.86 5,3.54 5,6.71zM4.27,3L3,4.27 7.73,9H3v6h4l5,5v-6.73l4.25,4.25c-0.67,0.52 -1.42,0.93 -2.25,1.18v2.06c1.38,-0.31 2.63,-0.95 3.69,-1.81L19.73,21 21,19.73l-9,-9L4.27,3zM12,4L9.91,6.09 12,8.18V4z"/>
+</vector>

package/android/src/main/res/drawable/ic_volume_on.xml

@@ -0,0 +1,10 @@
+<vector xmlns:android="http://schemas.android.com/apk/res/android"
+    android:width="24dp"
+    android:height="24dp"
+    android:viewportWidth="24"
+    android:viewportHeight="24"
+    android:tint="#FFFFFF">
+    <path
+        android:fillColor="@android:color/white"
+        android:pathData="M3,9v6h4l5,5V4L7,9H3zM16.5,12c0,-1.77 -1.02,-3.29 -2.5,-4.03v8.05c1.48,-0.73 2.5,-2.25 2.5,-4.02zM14,3.23v2.06c2.89,0.86 5,3.54 5,6.71s-2.11,5.85 -5,6.71v2.06c4.01,-0.91 7,-4.49 7,-8.77s-2.99,-7.86 -7,-8.77z"/>
+</vector>

package/android/src/main/res/layout/{video_player_view.xml → shakebug_video_player_view.xml}

@@ -6,25 +6,44 @@
     android:layout_height="match_parent"
     android:orientation="vertical"
     android:background="#000"
+    android:fitsSystemWindows="true"
     >
 
     <RelativeLayout
         android:layout_width="match_parent"
-        android:layout_height="50dp"
+        android:layout_height="80dp"
         android:background="#000"
         >
 
         <ImageView
-            android:id="@+id/cancelBtn"
-            android:layout_width="wrap_content"
-            android:layout_height="match_parent"
+            android:id="@+id/muteBtn"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
             android:layout_gravity="left|center_vertical"
-            android:padding="10dp"
+            android:padding="8dp"
+            android:src="@drawable/ic_volume_on"
+            android:scaleType="fitCenter"
+            android:contentDescription="Mute/Unmute"
+            android:layout_alignParentStart="true"
+            android:layout_alignParentLeft="true"
+            android:layout_marginTop="30dp"
+            android:layout_marginStart="20dp"
+            android:layout_marginLeft="20dp" />
+
+        <ImageView
+            android:id="@+id/cancelBtn"
+            android:layout_width="40dp"
+            android:layout_height="40dp"
+            android:layout_gravity="right|center_vertical"
+            android:padding="8dp"
             android:src="@drawable/ic_close_button"
+            android:scaleType="fitCenter"
             android:contentDescription="Close"
-            android:layout_centerVertical="true"
-            android:layout_marginTop="10dp"
-            android:layout_marginStart="10dp" />
+            android:layout_alignParentEnd="true"
+            android:layout_alignParentRight="true"
+            android:layout_marginTop="30dp"
+            android:layout_marginEnd="20dp"
+            android:layout_marginRight="20dp" />
 
     </RelativeLayout>
     <RelativeLayout
@@ -34,7 +53,8 @@
         android:layout_above="@+id/layout"
         android:background="#000"
         android:gravity="center"
-        android:layout_marginTop="50dp"
+        android:layout_marginTop="100dp"
+        android:layout_marginBottom="40dp"
         >
 
         <com.shakebug.widgets.ZVideoView